What is Redux and When to Use It?
Learn what Redux is, how its store, actions and reducers create predictable one-way data flow, when to use Redux Toolkit, and when simpler state is better.
Expected Interview Answer
Redux is a predictable state management library that stores all of an application's shared state in a single centralized store, updated only through dispatched actions processed by pure reducer functions.
Redux follows a strict one-way data flow: the UI dispatches an action (a plain object describing what happened), a reducer computes the next immutable state from the previous state and that action, and subscribed components re-render from the new store. This makes state changes traceable and debuggable, which is why tools like time-travel debugging exist. Modern Redux is written with Redux Toolkit, which reduces boilerplate and includes utilities like createSlice and a built-in Immer for safe immutable updates. Use it when state is shared widely, updated in complex ways, or needs to be inspected — otherwise local state, context, or a server-cache library may be enough.
- Single source of truth for shared state
- Predictable, traceable one-way data flow
- Powerful debugging with time-travel and action logs
- Decouples state logic from the component tree
- Redux Toolkit cuts boilerplate dramatically
AI Mentor Explanation
Think of the official match scorebook as the single authority for the game's state; nobody scribbles the score on their own sheet. Every event — a run, a wicket, a wide — is a formal entry the scorer records, and the scoreboard reads only from that book. Redux is that scorebook: one central store, and every change flows through a dispatched action so the whole ground stays in sync.
Step-by-Step Explanation
Step 1
Create the store
Use configureStore from Redux Toolkit to hold the app's centralized state.
Step 2
Define slices
Write createSlice with initial state and reducers that describe how state changes for each action.
Step 3
Dispatch actions
Components call dispatch(action) to signal that something happened, without mutating state directly.
Step 4
Reducers compute next state
Pure reducers take the previous state and the action and return the new immutable state.
Step 5
Read with selectors
Components subscribe via useSelector and re-render when the slice of state they read changes.
What Interviewer Expects
- The store, action, reducer, dispatch data-flow model
- Why reducers must be pure and state immutable
- Understanding of single source of truth and one-way flow
- Knowledge of Redux Toolkit as the modern standard
- Judgement on when Redux is and is not the right tool
Common Mistakes
- Reaching for Redux when local state or context would do
- Mutating state directly inside a reducer without Immer or a copy
- Putting server data in Redux instead of a data-fetching cache
- Writing verbose hand-rolled Redux instead of Redux Toolkit
- Storing derived data that could be computed with selectors
Best Answer (HR Friendly)
“Redux is a tool that keeps all of an app's shared information in one central place and changes it in a controlled, predictable way. This makes complex apps easier to debug and keeps every part of the screen showing consistent data, though smaller apps often do not need it.”
Code Example
import { configureStore, createSlice } from '@reduxjs/toolkit'
import { useSelector, useDispatch } from 'react-redux'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1 }, // Immer makes this safe
addBy: (state, action) => { state.value += action.payload },
},
})
export const { increment, addBy } = counterSlice.actions
export const store = configureStore({ reducer: { counter: counterSlice.reducer } })
function Counter() {
const value = useSelector((s) => s.counter.value)
const dispatch = useDispatch()
return <button onClick={() => dispatch(increment())}>Count: {value}</button>
}
export default CounterFollow-up Questions
- What problem does Redux Toolkit solve compared to classic Redux?
- Why must reducers be pure functions?
- When would you use React Context instead of Redux?
- How does Redux handle asynchronous logic like API calls?
- What is the difference between Redux state and server cache libraries?
MCQ Practice
1. Where does Redux store the application's shared state?
Redux keeps all shared state in one centralized store that acts as the single source of truth.
2. How is Redux state updated?
Components dispatch actions, and pure reducers compute the next immutable state from them.
3. What is the modern recommended way to write Redux?
Redux Toolkit is the official standard; createSlice reduces boilerplate and includes Immer for safe updates.
Flash Cards
What is Redux? — A predictable state container keeping shared state in one store, updated only via dispatched actions.
What is a reducer? — A pure function that takes previous state and an action and returns the new immutable state.
What is an action? — A plain object describing what happened, dispatched to trigger a state change.
What is Redux Toolkit? — The official, batteries-included way to write Redux with createSlice, configureStore and Immer.