Using a Redux Store
Explore how to set up a Redux store in a React application by installing necessary packages, creating a store with reducers, and connecting components using Provider, useDispatch, and useSelector hooks. Understand how Redux supports asynchronous updates and improves state management across components for better performance and clarity.
We'll cover the following...
Installing Redux
We first need to install Redux, the Redux bindings for React, and their associated type definitions:
$ yarn add redux react-redux @types/redux @types/react-redux
Then, we’ll create a Redux store in our app.
Creating a Redux store
To create a store in our app, we’ll use the function provided by Redux called createStore, which takes a reducer function as its single argument.
There’s a Redux Toolkit library that has support for creating more complex stores and reducers. We won’t be using it in this course, but if you are building true Single-Page Apps with Redux, you should definitely look at it.
The reducer we’ve been building in our page is structured to work in Redux nearly as is. The main difference is in initialization. Our existing reducer derives its initial state from the props passed to the App component. Redux, on the other ...