Key Concepts

Review core concepts you need to learn to master this subject

react-redux Package

Install react-redux

The Provider Component

The useSelector() Hook

The useDispatch() Hook

Selectors

react-redux Package

The react-redux package, the official Redux-UI binding package for React, lets your React components interact with a Redux store without writing the interaction logic yourself. This allows an application to rely on Redux to manage the global state and React to render the UI based on the state.

Interactions may include reading data from a Redux store and dispatching actions to the store.

The React Redux Library
Lesson 1 of 1
  1. 1
    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 sta…
    Start
  2. 2
    Why React Redux
    The recipe application in the code editor works. Run it right now and give it a try. React is handling the UI rendering through ReactDOM.render() which is inside the render() function. Redux is man…
    Start
  3. 3
    Installing react-redux
    To take advantage of React Redux within your application, you must install the react-redux package using npm, the Node Package Manager. If you’re not familiar with npm, you can [learn more in the d…
    Start
  4. 4
    The <Provider> Component
    Now that the react-redux library is installed, it is time to start the one-way data flow by giving the top-level component access to the Redux store. The component from the react-redux librar…
    Start
  5. 5
    Selectors
    The Redux store is provided to the React components of the application using the component. Now, for each React component, you need to define which data from the store that component needs access …
    Start
  6. 6
    The useSelector() Hook
    With selectors, you have given your application the instructions to access data from the Redux store. To use these instructions the useSelector() hook is provided by react-redux. useSelector() acco…
    Start
  7. 7
    The useDispatch() Hook
    With the component, selectors, and useSelector() implemented, you are now able to access the application state and subscribe component rendering to data changes. In this exercise, you are going t…
    Start
  8. 8
    Review
    Congratulations on finishing this lesson on the react-redux library! Let’s review what you’ve learned: - React and Redux work well together but need more to support R…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo