0

So i have a redux app, setup with React Router. Upon visiting each page in my routes, I fetch data for that page.

This works fine until I reach pageX/:id. This page has a list of items, each of these items are views that have their own state. (For example one of the items is a multiple choice survey, another is a text input block).

The items are displayed in a list, and the number and permutation of items is not know until after the data for the page is fetched.

The way I am handling this currently is by storing all my state within the components as they are rendered.

I want to refactor this up into redux state, but I am not sure how to do this. Is there a good way of dynamically attaching reducers to the application state? Or is there another pattern I can follow

Robert Lemiesz
  • 1,026
  • 2
  • 17
  • 29
  • Take a look at [normalizr](https://github.com/paularmstrong/normalizr). The point is not to use that, but rather to observe how state is structured to make working with dynamically fetched data with arbitrary complexity/relations easier. – user268396 Aug 27 '18 at 20:37
  • Hmm that actually might help. – Robert Lemiesz Aug 27 '18 at 20:55

1 Answers1

0

You can use redux-thunk and connect your components for those you want to store their local state in redux. Every time you can dispatch an action to update component's redux state.

The better explanation you can find by Dan Abramov, author of Redux, he has given a brief answer on a stackoverflow question about redux-thunk and it's integration across the components. PS timeout handling in his answer is additional thing.

How to dispatch a Redux action with a timeout?

Sakhi Mansoor
  • 7,832
  • 5
  • 22
  • 37