Redux: Actions are Events, Reducers are Event Handlers

WHY IT EXISTS: To make state changes predictable and traceable. Instead of components randomly changing global state, Redux enforces a strict one-way data flow. Every change is explicitly described by an action and handled by a reducer, creating a clear audit trail of what changed, when, and why.

THE MENTAL MODEL: Actions are event notifications. They are plain JavaScript objects with a type property (a string like 'todos/todoAdded') and an optional payload (the data, like the text of the new todo). They say "something happened" but contain no application logic. Reducers are the event handlers. They are functions that receive the current state and an action, and decide what the next state should be.

HOW IT WORKS: When you want to change the state, you dispatch an action object to the Redux store. The store then calls the root reducer function with the current state and the dispatched action. The reducer checks the action's type. If it's a type it cares about, it calculates and returns a new state object reflecting the change. If it doesn't recognize the action type, it returns the existing state unchanged. This new state then becomes the current state for the entire application.

WHEN TO USE IT: Use actions and reducers whenever you need to manage state that is shared across many parts of your application. This is the fundamental pattern for all state updates in a Redux application, whether it's for UI state (like a modal being open) or data state (like a list of users).

WHEN NOT TO USE IT: For state that is truly local to a single component, like the value of an uncontrolled form input, using React's built-in state (like useState) is often simpler. Redux is for global or complex shared state, not for every piece of state in your app.

ONE CANONICAL EXAMPLE: Imagine a counter. An action to increment would be { type: 'counter/incremented' }. A reducer would look like this: function counterReducer(state = { value: 0 }, action) { if (action.type === 'counter/incremented') { return { value: state.value + 1 }; } return state; }. Notice it returns a new object {...} instead of modifying state.value directly.