Redux – multiple stores, why not?

by

There are edge cases when you might use multiple stores (e.g. if you have performance problems with updating lists of thousands of items that are on screen at the same time many times per second). That said it’s an exception and in most apps you never need more than a single store.

Why do we stress this in the docs? Because most people coming from Flux background will assume multiple stores is the solution to making update code modular. However Redux has a different solution for this: reducer composition.

Having multiple reducers that are further split into a reducer tree is how you keep updates modular in Redux. If you don’t recognize this and go for multiple stores without fully understanding reducer composition first, you will miss many benefits of Redux single store architecture:

  • Using reducer composition makes it easy to implement “dependent updates” a la waitFor in Flux by writing a reducer manually calling other reducers with additional information and in a specific order.

  • With a single store, it’s very easy to persist, hydrate, and read the state. Server rendering and data prefetching is trivial because there is just one data storage that needs to be filled and rehydrated on the client, and JSON can describe its contents without worrying about store’s ID or name.

  • A single store makes Redux DevTools time travel features possible. It also makes community extensions like redux-undo or redux-optimist easy because they operate on the reducer level. Such “reducer enhancers” can’t be written for stores.

  • A single store guarantees that the subscriptions are called only after the dispatch has been processed. That is, by the time listeners are notified, the state has been fully updated. With many stores, there are no such guarantees. This is one of the reasons Flux needs the waitFor crutch. With a single store, this is not a problem you see in the first place.

  • Above all, multiple stores are unnecessary in Redux (except for performance edge cases which you are supposed to profile first anyway). We make it an important point in the docs so you are encouraged to learn reducer composition and other Redux patterns instead of using Redux as if it was Flux, and losing its benefits.

More Related Contents:

  1. Programmatically Navigate using react-router
  2. How to dispatch a Redux action with a timeout?
  3. How to reset the state of a Redux store?
  4. How can I display a modal dialog in Redux that performs asynchronous actions?
  5. React Context vs React Redux, when should I use each one? [closed]
  6. Fetch: reject promise and catch the error if status is not OK?
  7. Await is a reserved word error inside async function
  8. Deep copy in ES6 using the spread syntax
  9. How to overcome the CORS issue in ReactJS
  10. Why use Redux over Facebook Flux? [closed]
  11. Understanding React-Redux and mapStateToProps()
  12. Is this the correct way to delete an item using redux?
  13. React: how to load and render external html file?
  14. How do I access store state in React Redux?
  15. redux fetch body is not use with no cors mode
  16. Read Store’s Initial State in Redux Reducer
  17. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  18. How to trigger off callback after updating state in Redux?
  19. Cannot update a component while rendering a different component warning
  20. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  21. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  22. Programmatically change Redux-Form Field value
  23. Global state in React Native
  24. Redux Presentational Components Vs Container Component
  25. How can I dispatch function in redux?
  26. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  27. Component won’t update when a redux state change occurs
  28. React-Redux: Should all component states be kept in Redux Store
  29. FlatList renderItem is called multiple times
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment