Nesting Redux Providers

Question

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

Answer 1

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.