Menu
I want to distribute a React App as a React component. Currently it uses Redux to manage its state. If the end user also uses Redux to manage the state, there will be nested Providers. Would it be a problem or should I pass the store as a prop as Dan suggested here? I personally do not like the second way tho.
Thanks a lot
824
Overview The <Provider> component makes the Redux store available to any nested components that need to access the Redux store. Since any React component in a React Redux app can be connected to the store, most applications will render a <Provider> at the top level, with the entire app's component tree inside of it.
As with several other questions, it is possible to create multiple distinct Redux stores in a page, but the intended pattern is to have only a single store. Having a single store enables using the Redux DevTools, makes persisting and rehydrating data simpler, and simplifies the subscription logic.
Difference Between Context API and Redux. The main difference between these two libraries is that Redux deals with changes of the state in a centralized manner. On the other hand, Context deals with them as they happen on the component level.
Wrapping Up In this article, we went through what is Redux and Context API and their differences. We learned, Context API is a light-weight solution which is more suited for passing data from a parent to a deeply nested child and Redux is a more robust State Management solution.
As you're building a component to be consumed like any other black-box components, using redux internally and your own <Provider> is a fine option.
This will hide the parent app's store from your component but you don't want to access it anyways; it may not exist. Any data you want must be passed in through your top-level component's props.
Likewise, you don't want the parent-application to get data from your internal Redux store through Redux and you don't want any actions to go through both stores as there could easily be name conflicts and unwanted side effects.
Most people only think of Redux as an application-level state management solution and thus the negative comments. In your case your component is big enough to have a component-wide state management solution, and thus Redux for your component is appropriate.
All that said, I realize this post is several years old, so this answer is for others that stumble across this question (as I did). I would be interested in hearing in a comment what you ended up doing and how it worked out.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
