What to store in redux state?

I DON'T agree about storing all component state in the store. I prefer having in the redux store only data that matters to application as a whole and thus other components may benefit from this global accessible shared data.

Having component specific state in the store, that only matters to this component, is a overkill and useless IMO.


You store the state of your app in redux. How you structure your state tree is up to you. You can think of the state tree as one giant javascript object. With redux, you would ideally store as little component state in your react components themselves and instead move that to the redux state tree.

For example, if you fetched some user data, you could store that in the redux state such that your connected components have access to that data now. You can also get more granular and store states that describe certain UI components. A part of your state that describes a dropdown could look like this

{
  myDropdown: {
    isOpen: false,
    options: [
      'apple',
      'orange'
    ]
  }
}

I believe a good point to start incorporating redux is when your app gets to a certain point where your components are no longer just "dumb" components that display data.

Edit: To try and answer the question "when should I connect my components?". I struggled with this myself but don't have a great answer yet. Right now I typically connect a component if I am passing down props through many ancestor components just for that component specifically. So connecting would avoid that boilerplate code altogether.


Official REDUX page:

https://redux.js.org/faq/organizing-state#do-i-have-to-put-all-my-state-into-redux-should-i-ever-use-reacts-setstate

Some common rules of thumb for determining what kind of data should be put into Redux:

  1. Do other parts of the application care about this data?
  2. Do you need to be able to create further derived data based on this original data?
  3. Is the same data being used to drive multiple components?
  4. Is there value to you in being able to restore this state to a given point in time
  5. Do you want to cache the data
  6. List item

But...that means in most of off applications the only data what I should store in Redux store is the logged in user data. That is the only entity which attributes influences all the screens (role, login name, user settings).

Usual applications do not need to remember entered data between screens, cache, history....

Very confusing, so I am not really sure any more what to put in Redux store...

Tags:

Reactjs

Redux