React Interview Questions

A reducer in Redux is a pure function that takes the current state and an action as its arguments and returns a new state. Reducers specify how the application's state changes in response to actions sent to the store. They are essential in Redux architecture because they define the logic for state transitions.

Key Concepts

1. Pure Function:

   • A reducer is a pure function, meaning it produces no side effects and returns the same output given the same input. It does not mutate the original state but returns a new state object.

2. Parameters:

   • state: The current state of the application or a slice of the state.
   • action: An object that describes what happened, containing a type property and optionally additional data.

3. Return Value:

   • The reducer returns a new state based on the action type and any additional data provided in the action.

How Reducers Work

1. Initial State:

   • The reducer is given an initial state, which is used when the state is undefined, such as during the first initialization of the store.

2. Action Handling:

   • The reducer evaluates the action type to determine how to update the state. For each action type, the reducer contains a corresponding case that updates the state accordingly.

3. State Transition:

   • The reducer returns a new state object without mutating the existing state. This immutability ensures predictable state transitions and helps in debugging.

Example of a Reducer

Let's consider a simple example of a counter reducer that handles two actions: increment and decrement.

// Define action types
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// Define the initial state
const initialState = {
  count: 0,
};

// Define the reducer
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1,
      };
    case DECREMENT:
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
}

export default counterReducer;

Explanation

1. Initial State:

   • initialState is defined with a count property set to 0.

2. Reducer Function:

   • The counterReducer function takes the current state and an action as arguments.
   • The reducer uses a switch statement to handle different action types.
   • For the INCREMENT action, it returns a new state object with the count incremented by 1.
   • For the DECREMENT action, it returns a new state object with the count decremented by 1.
   • If the action type does not match any case, it returns the current state unchanged (default case).

Using the Reducer in a Redux Store

The reducer is used to create the Redux store, which holds the application's state and handles dispatching actions to the reducer.

import { createStore } from 'redux';
import counterReducer from './counterReducer';

// Create the Redux store
const store = createStore(counterReducer);

// Dispatch some actions
store.dispatch({ type: INCREMENT });
store.dispatch({ type: DECREMENT });

console.log(store.getState()); // Output: { count: 0 }

Explanation

1. Create Store:

   • The createStore function from Redux is used to create the store, with counterReducer as its argument.

2. Dispatch Actions:

   • The dispatch method is used to send actions to the store.
   • Each dispatched action is handled by the reducer, which updates the state accordingly.

3. Get State:

   • The getState method is used to retrieve the current state from the store.

Benefits of Using Reducers

1. Predictable State Management:

   • Reducers ensure that state changes are predictable and consistent, as they are pure functions.

2. Separation of Concerns:

   • Reducers help in separating state management logic from the UI components, leading to cleaner and more maintainable code.

3. Immutability:

   • By returning new state objects instead of mutating the existing state, reducers help in maintaining state immutability, which is crucial for debugging and optimizing performance.

Conclusion

Reducers are a core concept in Redux, responsible for specifying how the application's state changes in response to actions. By using pure functions that handle state transitions based on action types, reducers ensure predictable and maintainable state management. They play a crucial role in the Redux architecture, enabling developers to build scalable and robust applications.