React + Redux Clarification

react-redux.md

Discussion with a mentoree / pupil of mine about how React Redux works

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:

1. mapStateToProps
2. mapDispatchToProps (the bindings we talked about Friday, and my preferred way to dispatch)
3. mergeProps (which I’ve used all of one time) and gives you even more granular control over how arguments 1 & 2 get… well, merged 🙂
4. options, which I’ve used once as well. to tell the navigation it’s a pure 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 (connected 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