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

{
  questions: {
    loading: false,
    unanswered: [{ 
      questionId: 1, title: ... 
    }, {
      questionId: 2, title: ...
    }]
  }
}

In this example, the single object contains an array of unanswered questions, along with whether the questions are being fetched from a web API.

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 through reducers to update the state.

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

{ type: 'GettingUnansweredQuestions' }

The type property determines the kind of action that needs to be performed. The type property is an important part of the action because the reducer won't know how to change the state without it. 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 changes to the state for this action. The following example is another action:

{
  type: 'GotUnansweredQuestions',
  questions: [{ 
    questionId: 1, title: ... 
  }, {
    questionId: 2, title: ...
  }]
}

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

Action creators, which are types of functions, are often used to create the action objects. This is beneficial when a user interaction results in a number of store actions or the interaction is asynchronous, such as fetching data from a server.

Reducers are pure functions that make the actual state changes.

The following is an example of a reducer:

const questionsReducer = (state, action) => {
  switch (action.type) {
    case 'GettingUnansweredQuestions': {
      return {
        ...state,
        loading: true
      };
    }
    case 'GotUnansweredQuestions': {
      return {
        ...state,
        unanswered: action.questions,
        loading: false
      };
    }
  }
};

Here are some key points about reducers:

• Reducers take in two parameters for the current state and the action that is being performed.
• 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 app.