React-redux: Allow connect in more than one component connect(props, dispatchs)([Comp1, Comp2])

[danvc]

Hi RR team.

I'm thinking about create the possibility to connect the redux store in more than one component.

Today, we have the following way to connect into one component:

const myContainer = connect(props, dispatchs)(ComponentIWantToConnect)
And I'm willing to do this to share the same store:

const myContainer = connect(props, dispatchs)([ComponentIWantToConnect, AnotherComponent])

What do you think about it?

[jimbolla]

I don't understand what you're trying to accomplish.

[timdorr]

What would be the render of the resulting container? We don't have enough info to organize those components together correctly.

You can accomplish the same thing by currying connect with whatever state and action mappings you want to use commonly. Or you can build a container component that passes things to these components via props. Either way, this is something better left up to the user.

[danvc]

I wish just share the same reducer with other components that don't have its container.

[markerikson]

I think you either have a bit of a mis-understanding of how Redux's store works, or are using the wrong term there.

Reducer logic contributes to the app-wide state tree. A reducer may be related to a given component, but _any_ connected component can then retrieve that data too.

I _think_ what you're trying to say is that you want multiple components to use the same _mapStateToProps_ function, not "reducer", but I could be wrong.

[danvc]

I don't have 1 month in React/Redux, so, I'm pretty new at it.

And you're right @markerikson, I was trying to say that I want multiple components to use the same matpStateToProps function, without creating other Containers, just determining the component by using the connect(props, dispatchs)([component1, component2, component3)

[markerikson]

Okay. So, because connect returns a function, you can do this:

const mySpecialContainerCreator = connect(mapState);

export const FirstConnectedComponent = mySpecialContainerCreator(Component1);
export const SecondConnectedComponent = mySpecialContainerCreator(Component2);

You can re-use the function that is created by connect, rather than _only_ calling it immediately.

Or, I guess you could even do:

const components = [Component1, Component2, Component3];
const connectedComponents = components.map(mySpecialContainerCreator);

[danvc]

Yeap, and I'm doing this. I just wish verify if would be a nice implementation by doing as I said before. Thanks anyway @markerikson