Use the URL as the source of truth in React
In Single Page Apps we're used to fetch the data on event callbacks. That disables the capacity to use the URL to share it to someone else and get to the same state of the app, just like in non Single Page Apps.
This lesson shows you how to use React and React Router to use the URL as the source of truth for your app state.
Instructor: [00:00] Here we have a search component that, when we type something in the input, it will call this API and fetch the results, and show them here. The problem is right now, we cannot copy and paste the URL to someone else and expect to see the results because we are not using the URL as the source of true, so that's what we are going to do.
[00:26] First, let's go to the index file and let's import with Router from React Router, and you see it in the app component. What we've routed this is it will get the location and other routing settings and pass it to the component search as a property so we can react to them.
[00:59] Let's go back to the search component, and in order to react to that location, we can use the component WillReceiveProps, and we'll take the location from the props. From here, we can get both query strings. For the old one, we can get it from the props location search, and for the coming one, we'll get it from the location search.
[01:37] Remember that here, these are the next props. With this, we can check that they both are different. When they are different, we're going to fetch, bypassing the query string.
[01:57] Instead of fetching, when we type something, we will update the URL. The URL will call this hook, and then here is where we fetch.
[02:06] We have to change the fetch as well, because now it will not get the value. It will get a query string, and this query string will have also this part, so we don't need it here. Finally, we have to change the handleChange, so instead of fetching in here, we only will update the URL.
[02:27] First, let's build the query string. If there is a value, then we'll build it with it. If not, we will just make an empty string.
[02:42] We also need the current URL, so this part, and we can get it by using the Windows location HREF, and we can split by a question mark so we can take the first part. Finally, navigate to the location using window.location, and then build the URL using the current URL and the query string.
[03:21] If we try this, we type something here. Then we see the query string is updated, so now the flow has changed. We update the query string. This will react to it, and when they are different, it will fetch the data with the new query string.
[03:48] We still have something to do, because if now we update, it will not fetch it the first time. What we can do is basically, we can kind of duplicate this using the component DidMount hook.
[04:06] We don't need the location, and we only need to get one query string. If this query string exists, then we call fetch. Then we'll save.
[04:24] We'll see the first time is also called by using this query string, and if this is empty and we roll out, then it will not fetch it. This is how you get to have the URL as the source of true for fetching your data.
Yes, thank you! I was wondering the same thing though.
And conversely, if you're happy manipulating window.location directly, why not get the search value directly from there without needing react-router at all?
Is just a matter of preference, you can use react-router's methods for that. I use react-router to show a more real-world example (since most apps use it) and it pushes the location variable as a property, so you can react to it.
How does this work now with react-router-dom the latest react router (4)?
It is using version 4 of react router ;)
Thanks for the quick explanation. I also have a question, why did you set the window.location instead of using react-router's methods of changing location like push/replace/go?
Also, how can you handle back/forward buttons to read the state of the query params from the history?