🗄️ Redux Principles & Architecture

What Is Redux?

Redux is a predictable state container for JavaScript applications. That phrase is worth unpacking: it's a container (one place that holds your app's data), and it's predictable (the same actions applied to the same state always produce the same result). Although it's most famous as React's companion, Redux is framework-agnostic — it works with Angular, Vue, or plain vanilla JavaScript, because at its heart it's just a tiny library for managing a JavaScript object over time.

You've already met React's built-in state tools — useState and useContext. Redux doesn't replace them; it complements them for the slice of state that is genuinely global and changes in complex ways. Knowing when not to reach for Redux is as important as knowing how to use it, and we'll return to that at the end.

The Problem Redux Solves

Imagine a shopping app. The header shows a cart badge, a sidebar shows a mini-cart, and a checkout page shows the full cart. All three need the same cart data, and all three must update the instant an item is added. With component-local state, you'd lift the cart up to a common ancestor and thread it down through props — a pattern that quickly turns painful.

Prop drilling

"Prop drilling" is passing data through layers of components that don't use it themselves, just so a deeply-nested child can receive it. Each intermediate component becomes a courier for props it doesn't care about — fragile, noisy, and hard to refactor.

Every dotted arrow is a component forwarding cart it never reads. Redux cuts the cord: any component can read from the store directly, no matter how deep it sits.

Problems Redux addresses

The Three Principles

Everything Redux does follows from three rules. Memorize these — they're the constitution the whole architecture obeys.

1. Single source of truth

The entire state of your application lives in one object tree, inside one store. There's exactly one place to look, one thing to serialize for persistence, one snapshot to inspect while debugging.

// The whole app state is one plain object:
{
  user: {
    name: 'Ada Lovelace',
    email: 'ada@example.com',
    preferences: { theme: 'dark', notifications: true }
  },
  posts: [
    { id: 1, title: 'Redux is Predictable', likes: 5 },
    { id: 2, title: 'Learn Redux', likes: 3 }
  ],
  ui: { isLoading: false, error: null }
}

2. State is read-only

The only way to change state is to dispatch an action — a plain object describing what happened. Nothing, not even the app itself, writes to the store directly. This is the rule that makes every change intentional and traceable.

// ❌ Never mutate the store directly:
store.getState().user.name = 'Grace Hopper';

// ✅ Describe the change as an action and dispatch it:
store.dispatch({
  type: 'user/nameUpdated',
  payload: 'Grace Hopper'
});

3. Changes are made with pure functions

To specify how the state tree transforms in response to actions, you write reducers — pure functions of the form (state, action) => newState. Same inputs, same output, no side effects, no mutation.

// A pure reducer: no mutation, no side effects, fully deterministic.
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'counter/incremented':
      return state + 1;      // returns a NEW value
    case 'counter/decremented':
      return state - 1;
    default:
      return state;          // unknown action? return state unchanged
  }
}

// ❌ NOT pure — mutates its argument:
function badReducer(state, action) {
  if (action.type === 'counter/incremented') {
    state.count++;           // mutation! Redux can't detect this change
    return state;
  }
  return state;
}

The Building Blocks

Four pieces make up every Redux setup. Get comfortable with the vocabulary now; the next two lessons drill into actions and reducers individually.

• Store — created once, it holds state and exposes getState(), dispatch(action), and subscribe(listener).
• Action — a plain object with a required type string and, usually, a payload carrying data.
• Reducer — a pure function that takes the current state and an action and returns the next state.
• Dispatch — the store method you call to send an action in; it's the only way to trigger a state change.

// The store's public API in one glance:
import { createStore } from 'redux';

const store = createStore(counterReducer);

store.getState();            // read the current state
store.dispatch(action);      // send an action → runs the reducer
const unsub = store.subscribe(listener); // run listener after every dispatch
unsub();                     // stop listening

One-Way Data Flow

This is the single most important diagram in Redux. Data travels in one direction, always, in a loop. A user does something, an action is dispatched, the reducer produces new state, the store updates, and the UI re-renders from that new state — ready for the next interaction.

Walking the loop

1. Trigger — a user clicks, types, or an event fires.
2. Dispatch — an action object is sent to the store via dispatch.
3. Reduce — the store calls the reducer with the current state and the action; the reducer returns the next state.
4. Store update — the store saves the new state and notifies every subscriber.
5. Render — subscribed UI reads the fresh state and re-renders.

A Complete Counter Store

Let's tie every piece together with the smallest useful example: a counter. This is plain Redux (great for understanding the mechanics); further down we'll rewrite it the modern Redux Toolkit way.

import { createStore } from 'redux';

// 1. The initial state (also the reducer's default parameter)
const initialState = { count: 0, lastAction: null };

// 2. The reducer — pure, immutable, with a default case
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { ...state, count: state.count + 1, lastAction: 'increment' };
    case 'counter/decremented':
      return { ...state, count: state.count - 1, lastAction: 'decrement' };
    case 'counter/reset':
      return { ...state, count: 0, lastAction: 'reset' };
    default:
      return state;
  }
}

// 3. Create the store
const store = createStore(counterReducer);

// 4. Subscribe — this listener runs after every dispatch
store.subscribe(() => {
  console.log('State changed:', store.getState());
});

// 5. Dispatch actions to drive the state forward
store.dispatch({ type: 'counter/incremented' });
store.dispatch({ type: 'counter/incremented' });
store.dispatch({ type: 'counter/decremented' });

State changed: { count: 1, lastAction: 'increment' }
State changed: { count: 2, lastAction: 'increment' }
State changed: { count: 1, lastAction: 'decrement' }

Notice the spread ...state in each case: we build a new object rather than editing the old one. That immutability is what lets Redux detect the change by reference and tell the UI to re-render. We'll go deep on immutable updates in the Reducers lesson.

Redux Toolkit: The Modern Way

Everything above teaches you how Redux works — and you should understand it. But in real projects today, you should write Redux with Redux Toolkit (RTK), the official, recommended toolset. RTK removes boilerplate: it configures the store, generates action creators, and lets you write "mutating" reducer logic that's safely converted to immutable updates under the hood (via the Immer library).

import { configureStore, createSlice } from '@reduxjs/toolkit';

// A "slice" bundles the reducer AND its action creators together.
const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0, lastAction: null },
  reducers: {
    // Looks like mutation, but Immer makes it immutable & safe:
    incremented(state) { state.count += 1; state.lastAction = 'increment'; },
    decremented(state) { state.count -= 1; state.lastAction = 'decrement'; },
    reset(state)       { state.count = 0;  state.lastAction = 'reset'; }
  }
});

// createSlice auto-generates matching action creators:
export const { incremented, decremented, reset } = counterSlice.actions;

// configureStore sets up the store + DevTools + good defaults:
const store = configureStore({ reducer: counterSlice.reducer });

store.dispatch(incremented());   // same result, far less code
console.log(store.getState());   // { count: 1, lastAction: 'increment' }

Practice & Quiz

import { createStore } from 'redux';

function counterReducer(state = 0, action) {
  // TODO: handle 'increment', 'decrement', and 'incrementBy'
}

const store = createStore(counterReducer);
store.dispatch({ type: 'increment' });
store.dispatch({ type: 'incrementBy', payload: 5 });
console.log(store.getState());   // should log: 6

function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'increment':    return state + 1;
    case 'decrement':    return state - 1;
    case 'incrementBy':  return state + action.payload;
    default:             return state;
  }
}

const initialState = {
  todos: [],                 // [{ id, text, completed }]
  filter: 'all',             // 'all' | 'active' | 'completed'
  ui: { isLoading: false, error: null }
};

Best Practices & Pitfalls

✅ Do

• Use Redux Toolkit for new projects — it's the official standard and removes boilerplate
• Keep the whole app state in one store (single source of truth)
• Change state only by dispatching actions; keep reducers pure
• Name action types domain/eventName, e.g. cart/itemAdded
• Reach for Redux when state is truly shared and complex — not for every piece of local UI state

❌ Don't

• Mutate state inside a reducer (in plain Redux) — build a new object instead
• Put non-serializable values (functions, DOM nodes, class instances) in state or actions
• Perform side effects — fetch, timers, logging — inside reducers
• Reach for Redux to solve a problem that useState or Context already handles cleanly

Summary

📚 Additional Resources

• Redux — Core Concepts
• Redux Essentials — Overview and Concepts
• Redux — Three Principles
• Redux Toolkit — Getting Started

🚀 What's Next?

You now understand the architecture and the vocabulary. Next we zoom into the first building block in detail: Actions and Action Creators — how to design action objects, name their types, and wrap them in reusable functions.