As you saw in the last exercise, Redux can be used within the context of any UI framework, though it is most commonly paired with React. This makes sense considering that React and Redux were both developed by engineers at Facebook.
We can be more specific about the common steps involved in connecting Redux to a React UI:
- A
render()
function will be subscribed to thestore
to re-render the top-level React Component. - The top-level React component will receive the current value of
store.getState()
as aprop
and use that data to render the UI. - Event listeners attached to React components will dispatch actions to the
store
.
Take a look at store.js in the code editor. Here, you can see the completed light switch application following this pattern.
- The
render()
function is subscribed to thestore
. store.getState()
is passed as aprop
calledstate
to the<LightSwitch />
component.- The
LightSwitch
component displays the current state of the store, either'on'
or'off'
, and adjusts the background colors accordingly. - The
LightSwitch
component declares a click handler that dispatches atoggle()
action to thestore
.
Note 1: The prop name
state
isn’t a special React name and can be customized as the programmer sees fit. For example,lightSwitchState={store.getState()}
would also be valid.
Instructions
In the next exercise, you will implement the Counter app using a React UI. For now, take a moment and familiarize yourself with how the state of the store
is used by this application’s React components.
Observe that the same steps from the last exercise for connecting Redux to a UI are followed:
- Create a Redux store
- Render the initial state of the application.
- Subscribe to updates. Inside the subscription callback:
- Get the current store state
- Select the data needed by this piece of UI
- Update the UI with the data
- Respond to UI events by dispatching Redux actions