Create an Ajax request from User Input
This lesson covers a very common use-case: your application needs to make an ajax request for some data, but in order to construct the url or payload you need some input from the user first. We’ll see how we can extract data from a text input, dispatch it as an action, and then use that data in an Epic to construct a valid URL.
Instructor: [00:00] This button will currently fetch data when it is clicked. Let's remove that and replace it with an input field. We have a type of text, placeholder of "search beers." We register an on-change handler. When it fires, it will call the search function and pass along value from the text field.
[00:22] Search will come through on our props. We can replace this with search. We just need an action creator for it. We'll copy this fetch data. We'll say this is just called "search." Change this for search. Change those. Get rid of that. Then we can import that function we just created.
[00:52] Every time the input value changes, we will call this search function, which is our action creator that we registered here. This will dispatch this action into the Redux store. Let's go and verify that in the browser.
[01:10] If we try to search for "IPA," you can see we get three search events dispatched into the Redux store. We can go and handle that in our epic. You can see we were previously looking at this fetch data action. Let's change that for search.
[01:28] Because search has a payload, we'll be able to destructure that in here. This will now be equal to the value that the user typed in the search box. We need to go back into the beers action and actually add that here. This action will have a type of search, but it will have a payload of whatever is produced here.
[01:56] Search has a payload. We can destructure it inside this switchMap. Then we can use it to build up the search URL. For this particular API, searching is just a case of appending a query parameter.
[02:10] We can create a small helper function, search, that takes the term, being what the user typed in the box, and concatenates the API string above with this query parameter, beer name. Then we just encode the term to ensure it's a valid URL.
[02:29] Now, when we call getJSON here, we don't call the API directly. Instead, we call the search function and pass through the payload. Let's check that out in the browser. We go in here and just type a single letter. You can see that we get some search results. We set the status to pending. We were successful.
[02:51] If we check the network panel, you can see that we created this URL, where we had the regular API and then we appended "beer name s," "s" here being what we typed here.
[03:09] If we fill this out, you can see it made a number of network requests. They were canceled mid-flight. We finally made one with school there. This feature of canceling in-flight requests is something we get for free because we used switchMap.
[03:26] Because this action fires for every keystroke, we end up executing this function once for each action. That means that an AJAX request begins, but before it can complete, another action comes through. What switchMap does is it will unsubscribe to whatever you returned here. Then it will execute the function again, creating a new request.
[03:50] To recap, we are now making an AJAX request to this API by appending a query parameter with a search term that we got from this payload. The payload comes because in the action creator for search, we sent through some input. That originally comes from the event target value on this input field.
What ide./theme do you use?