What is a reducer in Redux?

💡 Concept Name

A reducer in Redux is a pure function that takes the current state and an action, then returns a new state based on the action type.

📘 Quick Intro

Reducers specify how the application state changes in response to actions sent to the store. They must be pure and not cause side effects to keep state predictable.

🧠 Analogy / Short Story

Think of a reducer as a chef following a recipe: given certain ingredients (current state) and instructions (action), the chef prepares a new dish (new state) without altering the original ingredients. The process is consistent and repeatable every time.

🔧 Technical Explanation

⚙️ A reducer is a function with signature: (state, action) => newState.
🔄 It takes the previous state and an action object describing the update.
⛔ It must not mutate the original state; instead, it returns a new state object.
🎯 The action object must have a type property indicating the kind of update.
🛠️ Multiple reducers can be combined using combineReducers for modular state management.

💻 Real Code Example


// Initial state
const initialState = { count: 0 };

// Reducer function
function counterReducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state; // Return current state if action type is unknown
  }
}

❓ Interview Q&A

Q1: What is the role of a reducer in Redux?
A: It determines how the state changes in response to actions by returning a new state.

Q2: Why must reducers be pure functions?
A: To ensure predictable state updates without side effects.

Q3: What arguments does a reducer receive?
A: The current state and an action object.

Q4: Can a reducer mutate the state directly?
A: No, it must return a new state object instead.

Q5: What happens if a reducer receives an unknown action type?
A: It should return the current state unchanged.

Q6: How can reducers be combined?
A: Using Redux's combineReducers function.

Q7: What is the initial state in a reducer?
A: The default state used if none is provided.

Q8: Why is immutability important in reducers?
A: It prevents unintended side effects and makes state changes trackable.

Q9: Can reducers perform asynchronous operations?
A: No, async operations are handled outside reducers, often via middleware.

Q10: What is an action's type property?
A: A string that describes the kind of state update requested.

📝 MCQs

Q1. What does a reducer return?

The same state object
A new state object
An action
A component

Q2. What arguments does a reducer take?

State and props
Action and dispatch
State and action
Reducer and store

Q3. Why must reducers be pure?

To improve speed
To ensure predictable results
To mutate state
To handle async tasks

Q4. What happens with an unknown action type?

Throw error
Return null
Return current state
Create new state

Q5. Can reducers mutate state directly?

Yes
No
Sometimes
Only in dev mode

Q6. How to combine multiple reducers?

Using useReducer
Using combineReducers
Using dispatch
Using createStore

Q7. What is initial state?

Null
Undefined
Default state value
Action type

Q8. Can reducers perform async tasks?

Yes
No
Sometimes
With middleware

Q9. What does action.type signify?

Component name
Type of state update
State value
Function name

Q10. Why is immutability important in reducers?

Increase speed
Avoid side effects
Reduce code
Allow mutation

💡 Bonus Insight

Reducers are the core of Redux’s predictable state management, enabling tools like time-travel debugging and logging, and ensuring your app state updates remain clear and maintainable.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon