Redux Terminology

Before going any further, let’s make these concepts more concrete with some examples.

Actions and action creators

The only way for an application to change its state is by processing actions.

In most cases, actions in Redux are nothing more than plain JavaScript objects passed to the store that holds all the information needed for the store to be able to modify the state:

//Example of an action object
{
  type: 'INCREMENT',
  payload: {
    counterId: 'main',
    amount: -10
  }
}

These objects are commonly wrapped in a function that can generate the objects based on a parameter because they often contain logic that can be used in multiple places in an application:

//function that generates an object
function incrementAction(counterId, amount) {
  return {
    type: 'INCREMENT',
    payload: {
      counterId,
      amount
    }
  };
};

As these functions create action objects, they are aptly named action creators.

Reducers

When a store receives an action, the store must figure out how to change the state accordingly. To do so, it calls a function, passing it the current state and the received action:

//A function that calculates the next state
function calculateNextState(currentState, action) {
  ...
  return nextState;
}

This function is called a reducer. In real Redux applications, there will be one root reducer function that will call additional reducer functions to calculate the nested state:

//A simple reducer implementation
function rootReducer(state, action) {
  switch (action.type) {

    case 'INCREMENT':
      return Object.assign({}, state, {
        counter: state.counter + action.payload.amount
      });

    default:
      return state;
  }
}

This sample reducer copies the original state into a new JavaScript object and overwrites the counter key with an updated value. The reducer does not change the original state parameter passed to it, keeping it immutable.

Note: Reducers never modify the original state; they always create a new copy with the needed modifications.

Middleware

Middleware are the most powerful and versatile entities in Redux because they have has access to the actions, the dispatch() function, and the store. Middleware acts like interceptors for actions. Before reaching the store, middleware can modify, create, and suppress actions.

Store

Unlike many other Flux implementations, Redux has a single store that holds the application information but no user logic. The role of the store is to receive actions, pass them through all the registered middleware, and then use reducers to calculate a new state and save it.

When a shift in the state is made, the store will receive an action and in turn notify all registered listeners of the change. This allows various parts of the system, like the UI, to update themselves according to the new state.