The whole state of the application lives inside what is called a store. The state is stored in a JavaScript object like the one following:

{
  products: [{ id: 1, name: "Table", ...}, {...}, ...],
  productsLoading: false,
  currentProduct: { id: 2, xname: "Chair", ... },
  basket: [{ product: { id: 2, xname: "Chair" }, quantity: 1 }],
};

In this example, the single object contains these:

• An array of products
• Whether the products are being fetched from a web API
• The current product the user is looking at
• The items in the users basket

The state won't contain any functions or setters or any getters. It's a simple JavaScript object. The store also orchestrates all the moving parts in Redux. This includes pushing actions though reducers to update state.

So, the first thing that needs to happen in order to update state in a store is to dispatch an action. An action is another simple JavaScript object like the one following:

{
  type: "PRODUCTS/LOADING"
}

The type property determines the type of action that needs to be performed. This is an important and required part of the action. The reducer won't know how to change the state without the type in the action object. In the previous example, the action doesn't contain anything else other than the type property. This is because the reducer doesn't need any more information in order to make the change to state for this type of action.

The following example is another action:

{
  type: "PRODUCTS/GETSINGLE",
  product: { id: 1, name: "Table", ...}
}

This time, an additional bit of information is included in the action in a product property. This additional information is needed by the reducer to make the change to state for this type of action. 

So, reducers are pure functions that make the actual state changes.

The following is an example of a reducer:

export const productsReducer = (state = initialProductState, action) => {
  switch (action.type) {
    case "PRODUCTS/LOADING": {
      return {
        ...state,
        productsLoading: true
      };
    }
    case "PRODUCTS/GETSINGLE": {
      return {
        ...state,
        currentProduct: action.product,
        productsLoading: false
      };
    }
    default:
  }
  return state || initialProductState;
};

Here is something about reducers:

• Reducers take in two parameters for the current state and the action that is being performed
• The state argument defaults to an initial state object for when the reducer is called for the very first time
• A switch statement is used on the action type and creates a new state object appropriately for each action type in each of its branches
• To create the new state, we spread the current state into a new object and then overwrite it with properties that have changed
• The new state is returned from the reducer

You'll notice that the actions and reducer we have just seen didn't have TypeScript types. Obviously, we'll include the necessary types when we implement these in the following sections.

So, now that we have started to get an understanding of what Redux is, it's time to put this into practice in our React shop.