Connect to React with React Redux

Learn to access the Redux store to retrieve data and dispatch actions througout your applications using the react-redux package.

Start

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
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
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
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
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
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
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
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
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