Learn React with TypeScript 3

Creating reducers

A reducer is a function that is responsible for creating new state for a given action. So, the function takes in an action with the current state and returns the new state. In this section, we'll create a reducer for the two actions we have created on products.

1. Let's start by creating a file called ProductsReducer.ts with the following import statements:

import { Reducer } from "redux";import { IProductsState, ProductsActions, ProductsActionTypes } from "./ProductsTypes";

We are importing the Reducer type from Redux along with types for the actions and state we created earlier.

2. Next, we need to define what the initial state is:

const initialProductState: IProductsState = {  products: [],  productsLoading: false};

So, ...