Redux Glossary

This is a quick-reference guide to common terms used in Redux development. For more in-depth information, see the Redux docs.

Store

The container object which provides utilities for accessing and updating the state. The most commonly used functions on the store are getState- which allows you to access the current value of the state- and dispatch- which allows you to make updates to the state with actions.

State

The information managed by Redux. This can be anything from a simple string or number to a complex Javascript object. Redux state is immutable, and changes are made to it by creating a new state with the updated value. State should always be serialisable to JSON, and should not include values such as functions, Date objects, promises, maps/sets, etc.

Reducer

A reducer is the mechanism for making changes to immutable Redux state- it is a function that accepts the current state and an action defining how the state should change, and returns the new state with the desired updates.

It may help to compare reducers to the functions passed to Array.prototype.reduce (or foldLeft in Scala), which receive the accumulated value and the array items one by one in iteration, returning a new accumulated value each time to be passed to the next iteration. In Redux, rather than reducing through every item in an array, we reduce and return a new state as and when actions are dispatched.

Action

An action represents a change to be made to the state, in the form of an object that contains a type key, and, optionally, other information pertaining to the change, such as an updated value. Actions look like this:

{
  type: 'toggleConfetti',
  shouldShowConfetti: true,
}

Actions are handled by reducers to determine what the new state should be. When working with plain Redux rather than Redux Toolkit, this is usually done via a switch statement looking at action.type:

switch (action.type) {
  case: 'toggleConfetti':
    return {
      ...state,
      shouldShowConfetti: action.shouldShowConfetti,
    };
}

With Toolkit, action types can be automatically derived from writing a state slice- see Writing state slices with Redux Toolkit

Thunk

In general programming terms, a thunk is some code that does something in the future- it is a way of deferring some work until later, whether that means later in time (via some async mechanism), or simply later in the call stack.

Thunks in Redux are functions passed into store.dispatch as if they were actions. This is enabled by the redux-thunk library that is automatically included with Redux Toolkit. Before passing the action into the provided reducer, Redux checks if the action is actually a function- if not, it continues as normal, but if the action is a function Redux calls it and passes in dispatch and getState as arguments so the thunk has access to the state and can dispatch further actions.

Redux thunks are often used for async data fetching, but can also be synchronous- the uniting factor is that they perform some other work besides updating the state. This are both examples of thunks:

function getConfettiStatusForUser(userId: string) {
  return async function (dispatch: Dispatch, getState: () => State) {
    const res = await fetch(`/api/confetti/${userId}`);
    const confettiResponse = await res.json() as ConfettiResponse;
    dispatch({
      type: 'toggleConfetti',
      shouldShowConfetti: confettiResponse.isOn,
    })
  }
}

function setConfettiPreference(showConfetti: boolean) {
  return function (dispatch: Dispatch, getState: () => State) {
    localStorage.setItem('shouldShowConfetti', showConfetti);
    dispatch({
      type: 'toggleConfetti',
      shouldShowConfetti: showConfetti,
    });
  }
}