React-Redux: "Container Component" is Plumbing

I think I understand the pieces now...

React Functional Components:
  • Are the preferred kind of component we write in React-Redux
  • Are functions that take a "props" object
  • Are the preferred way to output visual stuff and wire up events
The Redux Store:
  • Has all the state which we can display
  • Has the dispatch(action) method, which is the only way to change state
Your Mission (should you choose to accept it):
  • Use the state and the dispactch(action) function
  • Create props which are data values needed by the functional component
  • Create props which are event handlers that call dispatch(action)
The Locations:
  • mapStateToProps: Here you get the state and return props which are just data
  • mapDispatchToProps: Here you get the dispatch function and return props which call it
And then React-Redux's "connect" function magically combines the mapping functions and your functional component into a new component which you elsewhere.

-----------------------------------------------
PS: So that was the high level "lightbulb" of understanding. But even just to get through the famous todos example, there are some defaults and other cases. So it's really worth reading the entry for mapDispatchToProps at https://github.com/reduxjs/react-redux/blob/master/docs/api.md

This part:
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

If a function is passed, it will be given dispatch as the first parameter. It’s up to you to return an object that somehow uses dispatch to bind action creators in your own way. (Tip: you may use the bindActionCreators() helper from Redux.)

If your mapDispatchToProps function is declared as taking two parameters, it will be called with dispatch as the first parameter and the props passed to the connected component as the second parameter, and will be re-invoked whenever the connected component receives new props. (The second parameter is normally referred to as ownProps by convention.)

If you do not supply your own mapDispatchToProps function or object full of action creators, the default mapDispatchToProps implementation just injects dispatch into your component’s props.

Comments

Popular posts from this blog

Callback, Promise, Observable, and Doughnuts

Learn grid and grid-template-areas FIRST!!!

The Day TDD Started Working for Me