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, we are setting the products to an empty array and product loading state to false.

3. We can now start to create...