React (view) lives separately from Redux (data management).
bingo
In order for react-redux to communicate to each other there needs to be a connector
{ connect } from react-redux
.
There are ways around this, perhaps, but bingo again (you could write your own connect, like apollo did, but it just ties in with Redux, anyway 😛 piggyback
This connect takes two arguments: a function that maps all the props to the state
mapStateToProps
and a container component for the view to communicate to redux data via(Component)
.
Yes and no. connect
itself takes up to four arguments including:
mapStateToProps
mapDispatchToProps
(the bindings we talked about Friday, and my preferred way todispatch
)mergeProps
(which I’ve used all of one time) and gives you even more granular control over how arguments 1 & 2 get… well, merged 🙂options
, which I’ve used once as well. to tell the navigation it’s apure
component, and to stop looking for updates and just re-render.
The result of calling connect(map,map,merge,options)
[ almost all of which are optional so you can really control what’s going on] produces a “partially applied” function, for lack of a better word, which then takes a parameter, your child
component, which is wraps with the new props generated from connect
, allowing it to “magically” get props that come from outside the Parent => child hierarchy (currently via the undocumented React context
feature)
Once connected, the reducer listens for an action to be dispatched.
Technically, the store
listens. reducers
just get called by the store, when it notices an update has occurred (usually a dispatch
to / on the store), and then the store takes the result of the reducers (a pure function) and applies those changes to it’s own state.
Once updated, the component re-renders itself and manipulates the React component (view) for the user.
Technically, the store provides new props to it’s listeners (connect
ed components have a “subscription”) and those components pass new props down the the child
wrapped in connect
. When this happens, the :react: lifecycle kicks off componentWillReceiveProps
, which kicks the update lifecycle we studied