React Redux is the official Redux-UI binding package for React. This means React Redux handles the interactions between React’s optimized UI rendering and Redux’s state management. In this lesson, you will explore the benefits of using the React Redux library and then incorporate the tools provided by the library into a Redux application.
Throughout this lesson, you will be working with a recipe application that uses React for the UI and Redux for state management. You should be comfortable with React and how to create functional components, pass data through props, and nest components to create a complete application.
The recipe application also has a Redux implementation so you should be familiar with creating and combining reducers, creating the store, and dispatching actions.
Most importantly you should be familiar with Redux’s one-way data flow:
- Starting with the application state
- Rendering components based on that state
- Dispatching an action to trigger state changes
- Re-rendering any component affected by the new state
React Redux provides tools that will help you implement each stage of the data flow with a React UI.
Instructions
Before continuing you should note the application’s current functionality that will be replaced in the following exercises:
- Calling
ReactDOM.render()usingrender(). - Passing
store.getState()through<App>component props. - Passing
store.dispatchthrough<App>component props. - Subscribing
render()to the Redux store so it is called after state updates. - Using the
propsparameter in App.js to pass data through the component, also known as props drilling.
Move to the next exercise to learn about each of these elements of the current application and how React Redux can help improve on them.