I wonder if I can have a redux store in the library and the App also have a redux store

Question

I'm really new to React and need to ask. Can I have a ReactJs Redux store in a library and then use that library in an App that also has a Redux store?

Both of them do this:

    <Provider store={store}>
       ..App
    </Provider>

I learn ReactJs and am not sure I understand how this is built up how Webpack is loading the code here.

• Will these two React Stores collide?
• Can they exist independently?
• Can they share Reducers? (let's say the App want to use the library Redux store and send a dispatch to it )

I have tested doing some of this but can't make it work. It's like Redux after first loading the library Redux store then it can't load the App store but I'm a novice so must ask

Answer 1

Will these two React Stores collide? / Can they exist independently?

Two different stores created with createStore will not collide, and can exist independently.

behind the scenes, each store instance has a subscribe method, and its own subscribers array.

When using the react-redux Provider component, you are sending an instance of the store down the component tree with React's context API. The instance will be available to all children and decedents of the component which rendered the Provider. If there is another Provider in the way, that Provider's value will override the higher up Provider.

Thus, if you use another Provider with another instance of a store in your library, it will take effect only for the component tree starting from your library component. With the correct composition, there will be no collision.

Can they share Reducers?

Reducers are nothing but pure functions, meaning they shouldn't have any side effects. So you could export and reuse the same reducer logic if you want, you'll just need to register them with every store instance.

Lastly, I disagree with other answers here which claim you shouldn't use multiple stores. You have the exact use case where a separate store would be justified, where you have your main application using one store, and you have a standalone library that uses another unrelated global state.

Answer 2

In my opinion, everything is possible in the programming world, definitely, having a multi-store is possible too.

You asked several questions, first of all, I answer them and then explain a little bit more.

Can I have a Reactjs Redux store in a library and then use that library in an App that also has a Redux store?

1. Yeah, it's possible, the famous library that makes Redux easy to use is Redux Toolkit, which has a very easy flow to use and implement in your application, even it has a CRA template that you can create your application (zero-config) based on redux npx create-react-app [my-app-name] --template redux or redux-typescript npx create-react-app my-app --template redux-typescript. it works properly.

Will these two React Stores collide? Can they exist independently?

2. No, they won't collide because each store (never mind it is redux, mobx, or whatever) has a Provider and you should wrap part of your application or entire of it by using that <Provider store={store}>, so if you wanna have two stores, you can add two Providers and they won't collide. but, in connecting, and getting some data from stores, you should pay attention that which Provider you are going to call from. so they will be able to exist independently.

<ReduxOneProvider store={storeOne}>
  <ReduxTwoProvider store={storeTwo}>
    <MobxProvider store={mobXStore}>
     <App>
    </MobxProvider>
  </ReduxTWoProvider>
</ReduxOneProvider>

But, totally, I'm not a fan of having multi-store, for more info read here

Can they share Reducers? (let's say the App want to use the library Redux store and send a dispatch to it )

3. Yes, you know, reducer functions are separate pure functions, located in a folder, when you wanna build your stores, you should gather these functions and combine them, so, the answer is yes, but please consider, the connect function which comes from react-redux want two functions, mapStateToProps and mapDispatchToProps, inside the second you can call a reducer by using dispatch function. so you will have re-render in all stores.

my opinion:

Please avoid having a multi-store, even having one and dealing with it, makes the project a little bit hard to maintain. how you wanna deal with multi. it makes complicated issues.

Answer 3

Yes it is possible. To keep it simple, library is completely independent package where you can use the redux in normal way. And as you export the library's components to outer world, in same way export the store or dispatch which you would like to use in your application which is consuming the library.