consider always passing down dispatch regardless of what mapDispatchToProps does

I’m experimenting with composing several higher-order-components, like so:

compose(
  connect(mapStateToProps),
  authorize(unauthorizedAction),
  loadData(loadDataAction)
)(MyComponent);

It would be really nice if I could count on connect-ed components always having dispatch defined. Because if I do this:

compose(
  connect(mapStateToProps, { someAction, anotherAction }),
  authorize(unauthorizedAction),
  loadData(loadDataAction)
)(MyComponent);

…then my dispatch goes away in the connected component, and I have to implement a much more awkward mapDispatchToProps in order to get it back.

It’s worth noting that redux-form also suffers from this problem.

IMO, being able to rely on some consistent props in a connected component would make this kind of third-party composition a lot easier.

[gaearon]

Both approaches are extreme. We suggest taking the middle approach.

Try to create presentational components and use them when possible. However when you feel like you’re passing data through components in the middle that don’t use it, it’s a good signal that it’s time to create a container component for that presentational component.

So basically create containers when you feel like some particular component has become hard to reuse because it requires too much unrelated data that parent components don’t care about.

I strongly suggest you to watch the last 10 videos of my course because they deal with this particular question: https://egghead.io/series/getting-started-with-redux

[idibidiart]

My question is it seems that both in this thread and on S.O. there are two points of view on how to compose components with Redux.

1. Have a connector at the root of the component tree with state being pushed down to descendants as props and all descendants being pure stateless components
2. All components in a component tree are stateful and have a connector

I understand from the S.O. thread that there are tradeoffs and benefits to each of the above approaches but I don’t understand what the ideal way would be. Is it 1 or 2 or a combination of both as suggested in the accepted S.O. answer? Or is it some other model. I’m trying to understand how best to compose components when using Redux.

Your analysis in that S.O. post is very clear, and you seem to have been looking for the right solution but it’s not clear what that is, and more importantly how composition should be done in Redux.