Using a Redux Store

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 hand, requires its reducers to be able to initialize themselves without any input.

Thankfully, we can adjust our reducer to behave the way Redux expects with only a few small changes. First, we need to change our initial state to a value rather than a function, and we need to change the signature of the reducer function to take the initial state as a default argument. Note the import { createStore } from "redux" statement at the top of the file.