Invalidating/Refreshing the Redux store in a React web app?

Viewed 363

We are in the middle of migrating a fairly complex web app over to a React/Redux architecture.

One major design question i have not been able to find an answer for, is how is data stored in redux supposed to be 'refreshed'?

For example, say i load a list of items at a route like /items. Now the user wants to view a specific item and goes to /items/<id>.

The flow, as i understand should work something like, on the /items request, we make a API request and store all our items in the redux store. When a user clicks on a specific item, we pick out that specific item from our redux store, not needing to make a new API request as we already have the data.

This is all fine & well. But the question then, is what is the correct pattern for 'invalidating' this data?

Say, the user loads the list of items and walks away from there computer for a few hours. Now the list of items is theoretically out of date with the server.

How does one then, go about keeping the store up to date with the server?

2 Answers

You could use one of the following:

1) short polling (i.e. polling your server once in a while and update the store items)

2) long polling (you open connection, keep it until the data on the server changes, the server then sends you the new data and closes the connection, you reopen it etc...)

3) live updates with websockets, which provide bidirectional communication (this means the server can push data to the client)

Is it when the state changes, react will automatically rerender the component, this might not what you want, but what do you mean by the correct pattern for 'invalidating' this data? like 30 minute it will dispatch an action checkout the state change?

Related