reduxreact-reduxredux-formredux-thunk

Redux: How to create a new Redux store for separate child react components


I have a react component I'm importing into my project. Both my main project and the component use separate redux stores. Initially the component was just imported once and this had no issue, but when it's imported twice it uses the same redux store for both children.

How do I ensure that two imported children from the same library, that use redux, each use a separate redux store? Alternatively, what's a better solution? I tried trying to refactor how the store is used but didn't have much luck.

In the log I can see that the redux store is initialized only once on page load.


Solution

  • Redux is a global store. It is meant to be used as one store per application. While there are ways around that, documented here under "custom context", it is highly advised not to do that. If you are using the same component twice with the same props, it should also use exactly the right data. If that is not the case, you likely should not be using a global state from the beginning, but keep that state as component-local state in those two components.