What are reducers in Redux?

A reducer is a pure function that takes the current state and an action, and returns the new state. It specifies how the application's state changes in response to each action.

A reducer follows three rules:

• It calculates the new state only from its state and action arguments.
• It never modifies the existing state. It returns an updated copy instead.
• It has no side effects, such as API calls, timers or random values.

For an action it doesn't handle, a reducer returns the existing state unchanged. That is the default case below.

const todosReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    case 'REMOVE_TODO':
      return state.filter(todo => todo.id !== action.payload.id);
    default:
      return state;
  }
};