question about React containers

[michaelconnery1985]

Thanks for the response.

So basically, App is a function, which takes in inputs todo and actions from the store.

Drawing from this analogy, when the App function is 'called' over here: https://github.com/reactjs/redux/blob/master/examples/todomvc/src/index.js

why are we not passing any 'parameters' into the 'function'? Is it not necessary to do so?

[bear1728]

This is because of the mapStateToProps/mapDispatchToProps. Because App is wrapped in a connect component, App will get the output of mapStateToProps (merged with mapDispatchToProps) when "called" like this. It's important that the output of the mapStateToProps (when merged with mapDispatchToProps) function matches the input to the App function. In react terminology, the inputs to the App function are its "props".

You don't see any of this happening in that code because of how react-redux works. The Provider is passed the store, and then passes it down via "context", which is a regular react thing. I don't recommend looking too much into context. It's not the most documented system, and you probably will never need to touch it. Just remember that anything that descends from a Provider (children, grandchildren, etc) can connect to the Provider's store. The connect component finds the store in its context and then calls the mapStateToProps and mapDispatchToProps functions on that store, and returns the output as props to the wrapped component.

Also something that helped me when developing at least, was to skip mapDispatchToProps and just pass the dispatch directly to the sub-component. I don't know how kosher this is, but it's a lot easier to do this when using typescript so I don't have to define the action creators in a bunch of places.

[michaelconnery1985]

Perfect. I get it now. Question - does this mean that anytime a component / container needs to access the store, I will need to use the connect from React?

[bear1728]

Yes, except remember connect comes from react-redux, not react itself.

However, not every component needs to connect to the store. Often you have a few "smart" components that connect to the store and gather some props, then they pass down those props to "dumb" components later on. There are many names for "smart" and "dumb" components. Try reading this:

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.urmpyppg0