Redux Fundamentals Without the Ceremony

,

Redux is a predictable state container built around three ideas:

  1. Application state lives in a store.
  2. State changes are described by actions.
  3. Reducers compute the next state without mutating the previous state.

The original createStore API still explains the mechanics, although modern Redux applications should normally use Redux Toolkit.

The reducer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const initialState = {
  hobbies: [],
};

function hobbyReducer(state = initialState, action) {
  switch (action.type) {
    case 'hobby/added':
      return {
        ...state,
        hobbies: [...state.hobbies, action.payload],
      };
    default:
      return state;
  }
}

A reducer must be deterministic and free of side effects. Given the same state and action, it should return the same next state. Network calls, timers, random values, and localStorage belong outside it.

Store mechanics

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { legacy_createStore as createStore } from 'redux';

const store = createStore(hobbyReducer);

const unsubscribe = store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch({
  type: 'hobby/added',
  payload: 'Swimming',
});

unsubscribe();

dispatch sends an action, the reducer computes new state, and subscribers are notified. Redux itself does not render HTML; UI bindings such as React Redux connect store updates to components.

Modern Redux Toolkit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { configureStore, createSlice } from '@reduxjs/toolkit';

const hobbies = createSlice({
  name: 'hobbies',
  initialState: [],
  reducers: {
    added(state, action) {
      state.push(action.payload);
    },
  },
});

export const store = configureStore({
  reducer: {
    hobbies: hobbies.reducer,
  },
});

store.dispatch(hobbies.actions.added('Swimming'));

The reducer appears to mutate state, but Redux Toolkit uses Immer to produce an immutable result safely.

When Redux is worth it

Use Redux when state is shared widely, transitions need strong conventions, or debugging and middleware justify the extra abstraction. Local component state does not need a global parliament. Start with the simplest ownership model and add Redux when coordination becomes the actual problem.

References