8

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

AmerllicA
  • 29,059
  • 15
  • 130
  • 154
Tord Larsen
  • 2,670
  • 8
  • 33
  • 76

3 Answers3

4

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.

deckele
  • 4,623
  • 1
  • 19
  • 25
  • If your needing to share reducers between stores, that is likely a red flag that you would be better off with one store in the longer run. Otherwise you risk getting into the situation where you need to sync data between stores. – David Bradshaw Nov 17 '21 at 08:31
  • @DavidBradshaw It sounds weird, but I guess a utility type library would justify sharing a reducer between two stores... You would need a very specific use case, but it is possible! – deckele Nov 21 '21 at 00:57
3

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?

  1. 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 )

  1. 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.

diedu
  • 19,277
  • 4
  • 32
  • 49
AmerllicA
  • 29,059
  • 15
  • 130
  • 154
  • Hmm I get this error that the App Redux stor state can't be read.. In the library when I do `` then the App store cant be reached even doing the same `` in the app.. I use the yalc and doing yalc publish to add the library in VSCode, maybe that's why it's not working not sure – Tord Larsen Nov 15 '21 at 19:03
  • @TordLarsen, I didn't get what you mean clearly, you have two Redux? on is in your library? and on is in the actual project, correct? How your create your library (eg: I'm creating my libraries with TSDX)? You know! you should implement the 2 Redux configs in your actual project, after getting success, move one of them to your library. but dear bro, eventually, your solution is not good at all. use props to receive data and use Redux just in your actual project, I cannot understand having two state management at all. – AmerllicA Nov 15 '21 at 20:01
1

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.

Vishwa
  • 128
  • 4