Using LOCATION CHANGE of the react router replaces the lifecycle React to fetch data

Tram Ho

If you use React boilerplate , you are familiar with action , reducer , saga , container , component . And using lifecycel componentWillMount or componentDidUpdate to fetch data from the server is not too new, almost any container uses this common method.

You imagine in a project using React boilerplate that customers do not allow lifecycel to fetch data, what should farmers do?

The difficulty is that the wisdom, I will show you two very simple way

Method 1: Use your 1 a flag-called init something suppose initRoom rolls to save the state of the left limit of the fetch data by default is false

In the container we will check initRoom if it is false then fetch data

When the get room is successful we just need to reassign initRoom = true to hide the loaded Rooms .

By creating an initRoom flag we could not use React ‘s lifecycle, componentWillMount or componentDidUpdate still fetch data from the server.

Too simple is not it, but do not rush to celebrate there is a problem here. What the problem is, we continue to analyze.

A single page called a single page actually still has a lot of different menu content, and when switching the route to another content, the initRoom still there and was true . And the sad thing is when we go into that route the content doesn’t reload 😱 wtf, that’s the problem.

Is this a big problem? To solve this problem, there is no way in the react boilerplate every time the change route dispatches an LOCATION_CHANGE action and it is the key to solving the problem.

Very simply whenever LOCATION_CHANGE in reducer we will reset state and initial form initialState

It’s simple, isn’t it? 😍😍😍

Method 2: This is a more perfect way that there is no need for a flag , sounds mysterious? There is no flag when it knows how to load the data here.

To do this, we need to use the knowledge of the redux-saga guy as a fork or call .

Now how to fetch data when starting to load the page is in fact redux-saga will fork listening for action if it is assigned we look at an example below

redux-saga will listen to the dispatched GET_ROOMS action and call getRoom .

That’s when we assign the action and when not assign any action , the default will be called every time the page loads.

We will simply fix the following

The problem has been solved in one note of yours. There is nothing wrong with it, but the problem is that when we first fetch data fetch from the server, it is very accurate and accurate.

The problem we move to another route and later when we re-enter the same route is not reloaded, it’s a big deal.

Thankfully, Mr. LOCATION_CHANGE has saved the life of Hue again, the problem has become very simple.

In Redux-saga we will assign the LOCATION_CHANGE action whenever the location change we will check what the current route is, if it is the page’s route then simply call getRoom again.

Let’s see the code handle location change

Thus, we have solved the problem of loading the page, and the problem of getting out of that page and then reloading, also reloading the data.

Conclusion with the above two ways we may not need to use the React lifecycle and still load data from the server. Hopefully the article will be helpful for those who want to understand the architecture of React boilerplate as well as redux-saga . Add a good solution for not using lifecylce but still ensure the problem is fetch data from the server.

Share the news now

Source : Viblo