2

In my application, on route1 I get a list of items from an api call. The component is connected and the items are saved in redux store and passed to the component as props. Now, on route2 I again need this list of items. For now, i am fetching the list of items again when we move to route2

  1. Does it make sense to reuse the list of items which is already in global state? If yes, how do we decide when it is stale and when to refetch?

  2. If it doesn't make sense to reuse the list of items, should i clear the list when moving away from route1/when loading route2? Because otherwise, my component in route2 cannot start with an assumption that the list would be empty on load, and I would have to put an extra check for whether or not the list is empty. This would make my component kinda aware of the global state structure.

  3. Does it make sense to name these pieces of state differently, so that one doesn't interfere with the other? This doesn't seem right, as both the functionalities are same, and we wouldn't want to increase the size of global state for this.

  4. is redux or any global state management library not a good choice for handling this kind of state? This seems like state local to a route, which should not interfere with local state on another route, so it is not truly global. Should we only keep global state in redux ?

I have previously been using useReducer with axios calls to do this. The state in that case was local to each of the components/route, so they didn't have to care about whether or not the state has been populated by someone else. This approach had problems with sharing state between routes, but local state problem was handled well.

gaurav5430
  • 12,934
  • 6
  • 54
  • 111

2 Answers2

0

In this situation, I think you should store the item list in the global state as readonly data. When a route component initialize, it should clone this item list from the global state and store it as local state.

This way ensures that the item list data is shared across multiple components without having to refetch it for every route while each component can choose to do whatever they want with its local data without affecting other components. Also, when the component unmounts, it will clean up its local state so you don't have to worry about memory leak due to multiple copies of the item list.

Dat Pham
  • 1,765
  • 15
  • 13
  • so, in this case, when should a decision be made to refresh the global state? I understand there are might be no "right" answers for that, but what factors can help decide when the state is stale – gaurav5430 Jul 04 '19 at 05:28
  • @gaurav5430 Well, it depends on the way you communicate with API server. Can you describe how you intent to detect changes of the data from API? (by polling, push notification, etc) – Dat Pham Jul 04 '19 at 05:35
  • right now, there is no detection for data changes, every time you go to a new route, i fetch the latest data – gaurav5430 Jul 04 '19 at 07:07
0

I have been in this situation and the approach I used was as follows:

  1. Keep one state for both routes. Since that's the only point of keeping a single source of truth across the application. If we want to keep a separate list for both routes then we can directly use state which I think is not required here.
  2. Fetching of the list should be done in componentDidMount of the first route and in route 2 you can again fetch the list and compare the data based on some checksum if we have new data or not if we have new data update the original list. In this, we don't have the problem of stale data too.

Maybe you can have a different use case but check if this approach works.

cauchy
  • 1,123
  • 1
  • 9
  • 19
  • if we have to fetch the data in route2 again, wouldn't it make sense to make these routes independent of the global state, and always fetch the state locally ? why do we even need to keep the state in redux ? – gaurav5430 Jul 04 '19 at 07:08
  • We are fetching data only if required. – cauchy Jul 04 '19 at 08:01
  • @gaurav5430 Any help?? – cauchy Jul 05 '19 at 05:44
  • How are you deciding when data is required? Also, this approach is cumbersome, to check whether there is new data and then update in the original list. Also, fetching of the list can be done in componentDidMount of route1 , there is no order to which route would be loaded first, so all the checks would need to recide in both routes – gaurav5430 Jul 05 '19 at 05:55