Redux: Actions are Events, Reducers are Event Handlers
Redux Actions are events describing *what* happened (e.g., 'task added'), while Reducers are functions that specify *how* state changes in response. This pattern is central to managing global state. The biggest footgun is mutating state directly in a reducer.
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.
Interview question
What is a critical rule for Redux reducers to ensure predictable and traceable state changes?
- a.They should dispatch new actions after every state update they perform.
- b.They are responsible for determining what event occurred in the application.
- c.They must directly modify the current state object to apply updates.
- d.They must return a new state object when changes occur, never mutating the original.Correct
Why? this is the answer
The card emphasizes that reducers must return a new state object instead of modifying the existing state directly, calling direct mutation a 'footgun'. Option C describes this exact anti-pattern, making it incorrect. Reducers handle actions; they do not dispatch them, making option A incorrect. Actions, not reducers, describe 'what' happened, making option B incorrect.
Just read this? Test yourself on what you have been reading.
Read the original → redux.js.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on redux — each one lists the topics its interview covers.
See open roles