React-redux: Any way to pass store to connect()?

[kentor]

I'm trying to integrate React with a legacy Angular app, using https://github.com/ngReact/ngReact.

I'm using build tools (browserify, babel) for the React related code, and exporting components globally via window. The angular app is not using build tools so everything it needs will need to be in the global scope. Angular can render these component via the directive provided by ngReact, e.g. this directive renders the globally exported HelloComponent: <react-component name="HelloComponent"></react-component>

The thing is I want to use connect() on HelloComponent, but the question is then how do I specify the store for the connected component? Since there will be many React roots it seems like Provider isn't a great idea. Passing the store as props to the connected component would have to be done in the angular world and it would be inconvenient.

The other thing I can think of is passing store during the call to connect, but the API doesn't support that. Was there a reason for not allowing this way of passing the store?

[gaearon]

You can create a custom connect():

function connectWithStore(store, WrappedComponent, ...args) {
  var ConnectedWrappedComponent = connect(...args)(WrappedComponent)
  return function (props) {
    return <ConnectedWrappedComponent {...props} store={store} />
  }
}

// Usage:
Stuff = connectWithStore(store, Stuff, mapStateToProps)

[aurimus]

Is this valid today? I need the same thing with react-rails

[markerikson]

Yep - connected components still support reading the store from props, as well as from context.

[jordanpapaleo]

Hi Team

Little background: I need to have separate stores as I am building micro apps that exist in a container app. My parent component is an installable product uses redux and react-redux. It will be installed in other apps that have the same state management stack as well as install other micro apps that have their own state. It may sound a little confusing but in reality its pretty straight forward. It basically follows an installable widget pattern. All of these widgets are complex enough to need their own state and they need to be able to be installed in many different locations.

APP 1: needs isolated redux and react-redux
WIDGET 1: Installed in APP 1 and needs isolated redux and react-redux
WIDGET 2: Installed in WIDGET 1 and needs isolated redux and react-redux

Its all been going fine. In my lower lever widgets I have been using redux without react-redux but that breaks the patterns my entire team follows and introduces a slightly different paradigm for state management. I'd like to keep things consistent so I am updating my data flow to use react-redux for all apps and widgets.

The issue I have found is the nesting of application stores.

I have been having some issues with implementing this. I am using the same code block from Dan above:

Here is the implementation:

Here is the console output from the logs in connectWithStore function:

I am getting the following error:

Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".

I did remove <Provider store={store}> from my application as I am explicitly passing the store via the connect.

I have tried a bunch of different angles but have not been able to make it past here. I would love some guidance please.

Thanks,

Jordan

[markerikson]

@jordanpapaleo : you can pass store as a prop directly to a connected component, but that doesn't make the store available to any other connected components inside of it. So, if you have multiple levels of connected components, you do need to wrap them in <Provider store={store}><SomeComponent /></Provider>.

[jordanpapaleo]

Hi Mark - Ill give that a try now but I thought the point of passing a store to the connect function was that it did not need a provider allowing for multiple redux stores.

So I just did a test with a provider at each step where I need a new store and things seem to be working. Thanks :)

[markerikson]

Yeah, <ConnectedComponent store={store} /> is a limited usage. It makes the store available to _that_ component, but not any other components.