Skip to Content
Learn
The React Redux Library
Introduction

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:

  1. Calling ReactDOM.render() using render().
  2. Passing store.getState() through <App> component props.
  3. Passing store.dispatch through <App> component props.
  4. Subscribing render() to the Redux store so it is called after state updates.
  5. Using the props parameter 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.

Folder Icon

Take this course for free

Already have an account?