Redux Interview Questions

Redux has been used for a while now by many developers in the React ecosystem, for everything from small projects to large enterprise applications. It is predictable single source of truth, unidirectional data flow, and centralized state make it an essential skill for React developers. Whether you are interviewing for a frontend developer position, a React developer job, or just want to better understand state management in the front end, a deep understanding of Redux is a must.

In this blog post, we have compiled 100+ most useful Redux interview questions, grouped into Beginner, Intermediate, and Advanced sections. Each question has a well-written, interview-ready answer (or answers), including code examples when relevant, for perspective in case you need to demonstrate anything technical in an interview.

After you get through this resource, you will understand:

• The core concepts in Redux (actions, reducers, store, and middleware)
• How to manage async actions with Thunk, Saga, or Redux Toolkit
• How to think about state normalization, performance, and real-time updates
• How to keep Redux projects maintainable and best practices for long-term scaling.

Beginner Level Redux Interview Questions

These introductory Redux questions are great for any beginner and entry-level React developers preparing for interviews. They focus on the basic concepts of Redux, which include actions, reducers, the store, and connecting React components to Redux. Knowing the basics will help you answer many popular interview questions and help you reinforce your knowledge of Redux state management in general.

1. What is Redux?

Redux is a predictable state management library that is typically used with JavaScript frameworks, such as React, Angular, and Vue, but can also be it with plain-old JavaScript as well. It allows for managing that state in a single store in a better way that is predictable, maintainable, and used to scale big applications. Redux follows unidirectional data flow, which means state is consistently updated in one direction.

2. What are the core principles of Redux?

Redux has three guiding principles: 

• Single Source of Truth – The application’s entire state is stored in a single object, called the store. 
• State is Read-Only – The only way to change the state is to dispatch an action, an event that describes what happened. 
• Changes are made with pure functions – Reducers (the functions that will create our store) are pure functions that take the previous state and an action, then return the new state. 

These have some significant implications on how we program and debug applications; our state is predictable, easy to debug, and easily maintained.

3. What is an action in Redux?

An action is a plain JavaScript object that describes an event (or a change) occurring in the application. All actions must have a type property (a string constant identifying the type of action). All actions may also contain a payload, which holds additional data. 

For example: 

const addTodo = {
  type: "ADD_TODO",
  payload: { id: 1, text: "Learn Redux" }
};

Actions are dispatched to the store, which will in turn be handled by reducers that will change the state.

4. What is a reducer in Redux?

In Redux, a reducer is a pure function that specifies how the state should change in response to an action. It takes two parameters: the current state and the action, and returns a new state object, without mutating the original state.

For example:

function todoReducer(state = [], action) {
  switch (action.type) {
    case "ADD_TODO":
      return [...state, action.payload];
    default:
      return state;
  }
}

Reducers are what make immutability simple and clarify how the state changes from action to action.

5. What is the Redux store?

The Redux store is a single object that contains the entire state of the app. The Redux store contains methods that allow us to:

• getState() – Read the current state. 
• dispatch(action) – Dispatch an action to change the state. 
• subscribe(listener) – Subscribe to listeners that call back whenever the state changes.

The Redux store is the one source of truth for your app that maintains consistency in state management.

6. How do you create a Redux store?

You can create a Redux store using the createStore function provided by Redux. The store must use at least one reducer. It optionally can take an initial state and middleware as arguments when creating a store.

Example:

import { createStore } from "redux";
import rootReducer from "./reducers";

const store = createStore(rootReducer);

This store will act as the epicenter of state management in your app. Components can access the state, dispatch an action, or subscribe to state updates.

7. What is the purpose of the createStore function in Redux?

The createStore function is used to create and configure a Redux store. It:

• Contains the entire state of the application
• Takes reducers to control when/what actions change the state
• Allows developers to plug in middleware and development tools for debugging.

In short, createStore will be the first point of setup for redux in any project.

8. What is the purpose of the dispatch function in Redux?

The dispatch function is used to send action(s) to the redux store. When an action is dispatched, the store sends the action to the reducers to update the state.

For example:

store.dispatch({ type: "ADD_TODO", payload: { id: 1, text: "Learn Redux" } });

Without dispatch, there is no way to let Redux know that something has happened in the application.

9. What is the role of getState() in Redux?

The getState() function allows you to access the state stored in redux. getState() returns the latest state object registered with the store.

const currentState = store.getState();
console.log(currentState);

This is useful if you need to read the state directly (such as middleware), for debugging, or based on a condition before dispatching another action.

10. What is the purpose of the combineReducers function in Redux?

combineReducers is a helper function to share the state handling by splitting it across multiple reducers that handle specific parts of the state, combining them into a single root reducer, which is passed to createStore.

Example:

import { combineReducers, createStore } from "redux";
import authReducer from "./authReducer";
import todoReducer from "./todoReducer";

const rootReducer = combineReducers({
  auth: authReducer,
  todos: todoReducer
});

const store = createStore(rootReducer);

This helps with modularity, scalability, and maintainability of your code in larger applications.

11. How do you connect a React component to a Redux store?

 A React component is connected to the Redux Store using the React-Redux library. Both approaches have their own advantages: 

• Using the connect function (classic way) 
• Using React Hooks (useSelector and useDispatch) 

In both of these approaches, you are making your component aware of the Redux Store without passing down the state and dispatching manually.

Example with hooks:

import React from "react";
import { useSelector, useDispatch } from "react-redux";

function TodoList() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  return (
    <div>
      {todos.map(todo => <p>{todo.text}</p>)}
      <button> dispatch({ type: "ADD_TODO", payload: { id: 2, text: "Redux Hooks" } })}>
        Add Todo
      </button>
    </div>
  );
}

This approach makes the component aware of the store without manually passing state and dispatch as props.

12. What is the purpose of the Provider component in React-Redux?

The Provider Component makes the Redux Store available to all components in the application, inside the React hierarchy. Without the Provider component, components wired will not be able to access the store in Redux.

Example:

import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

<Provider store={store}>
  <App />
</Provider>

You may think of the Provider Component as a bridge connecting React to Redux.

13. What is the purpose of the connect function in React-Redux?

The connect function is a higher-order function provided in React-Redux that connects React components to the Redux store. It maps state and dispatch functions to props in a component, allowing components to access the Redux store used in React without needing to directly call store.getState() or store.dispatch().

Example:

import { connect } from "react-redux";

function TodoList({ todos }) {
return <ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>;
}

const mapStateToProps = state => ({ todos: state.todos });

export default connect(mapStateToProps)(TodoList);

14. What does the mapStateToProps function do in React-Redux?

 The mapStateToProps function defines which part of the Redux state the component needs. The function maps the state coming from Redux store into props in the component. The component will then have access to only the relevant state from Redux.

Example:

const mapStateToProps = state => ({

  todos: state.todos

});

When state on the store changes, if the relevant state was returned in the mapStateToProps function, React-Redux ensures that the component will be refreshed and re-rendered. This is beneficial for performance.

15. What is the use of mapStateToProps and mapDispatchToProps in Redux?

 The two functions work independently to achieve the common goal of connecting React and Redux:

• mapStateToProps: selects which data from the store should be passed as props to the component.
• mapDispatchToProps: takes action creators and maps them to props to be used in the component to dispatch actions that update the Redux state.

Example:

const mapStateToProps = state => ({ todos: state.todos });

const mapDispatchToProps = dispatch => ({

  addTodo: (todo) => dispatch({ type: "ADD_TODO", payload: todo })

});

Together they allow a React component to read data from Redux store and to update the state using redux, in a clean, structured way.

16. How do you dispatch an action?

 There will be a dispatch() function provided by the store and if you are using React-Redux, this can also be provided by useDispatch.

Example with a store:

store.dispatch({ type: "ADD_TODO", payload: { id: 1, text: "Learn Redux" } });

Example with hooks:

const dispatch = useDispatch();

dispatch({ type: "ADD_TODO", payload: { id: 2, text: "Redux with Hooks" } });

Dispatching is the only way to inform Redux that something has occurred and there are changes that need to take place in the state via reducers.

17. What is an action creator in Redux?

An action creator is a function that returns an action object. Instead of putting actions right in your components, you will use action creators and can easily reuse any actions when needed.

Example:

const addTodo = (text) => ({

  type: "ADD_TODO",

  payload: { text }

});

By using action creators, you make it easy to maintain, test, and read large applications.

18. How do you create an action in Redux?

To produce an action, you define a plain JavaScript object with at least a type property. Optionally, you can also provide a payload with any additional data.

Example:

const action = {

  type: "ADD_TODO",

  payload: { id: 1, text: "Practice Redux" }

};

Instead of hard-coding action creators, you can have an action creator function that will dynamically create actions when you need them.

19. What is an action type in Redux, and why is it important to use constants for action types?

 
An action type is a string that indicates an action’s intent. It is used by reducers in order to decide how to update the state.

Example:

const ADD_TODO = "ADD_TODO";

const addTodo = (text) => ({

  type: ADD_TODO,

  payload: { text }

});

Using constants for action types:

• Prevent typos (i.e., “AD_TODO” vs. “ADD_TODO).
• Make the codebase easier to maintain.
• Allows action types to be shared across files.

The best practice for using action types is to have a separate file for your action type constants (i.e., actionTypes.js)

20. What are constants in Redux?

In Redux, constants are variable values that hold action type strings. Developers use constants in place of direct string values in actions and reducers for consistency and to avoid typos. Constants also allow developers to manage action types more easily in larger projects by enabling action types to reside in a single file.

21. Show using code how constants can be used in Redux.

Here is a very simplistic example of how to leverage constants in Redux:

// actionTypes.js

export const ADD_TODO = "ADD_TODO";

// actions.js

import { ADD_TODO } from "./actionTypes";

export const addTodo = (text) => ({

  type: ADD_TODO,

  payload: { text }

});

// reducer.js

import { ADD_TODO } from "./actionTypes";

function todoReducer(state = [], action) {

  switch (action.type) {

    case ADD_TODO:

      return [...state, action.payload];

    default:

      return state;

  }

}

This way, you avoid duplicating strings, eliminate errors, and help maintain a more manageable codebase.

22. What is a “pure function” in the context of Redux?

 A pure function is a function that always returns the same result for the same input and has no side effects (e.g., APIs or changing external variables).  Reducers in Redux have to be pure functions since they take a state and an action, and return a new state without mutating the existing state.

Example of a pure reducer:

function counterReducer(state = 0, action) {

  switch (action.type) {

    case "INCREMENT":

      return state + 1;

    default:

      return state;

  }

}

Pure functions let functions that serve as reducers predictable and thus easier to test.

23. What is the significance of immutability in Redux?

 Immutability in Redux means that you can’t modify the state directly. Instead, reducers must return a new state.  The reason immutability is important is:

• It allows tracking of state changes, which makes tracking them predictable. 
• It allows for some cool debugging features. (e.g.. time travel debugging)
• It helps with React’s rendering behavior to know which components to update based on state changes.
• It doesn’t create unexpected mutations when something (e.g., data or shared data) is modified elsewhere.

24. Is the state in Redux mutable or immutable?

 The Redux state is immutable. You can’t change it but reducers must return a new state object when calls are made to dispatch an action.

Example (incorrect vs. correct):

Mutable (wrong):

state.todos.push(newTodo);

return state;

Immutable (correct):

return [...state.todos, newTodo]; 

Immutability is a core feature of Redux to allow predictable management of state.

25. How does Redux ensure that the UI components are updated when the state changes?

There is a guarantee that the UI components update after a state update in Redux, through subscriptions. When a component is mapped to the Redux store (either through connect or useSelector), it subscribes to state changes as indicated in the listener function.

• When an action is dispatched, the reducers return different states. 
• The store must notify all subscribers that the state has been updated. 
• The connected components will automatically render with the latest state.

The flow is predictable so that the UI will always align with the application state, since they are the same object.

26. What is the concept of “single source of truth” in Redux?

The single source of truth just means all of the application state is contained in a single store object. Instead of having multiple sources of state contained in the components, everything is controlled in the store.

The advantages are:

• Uniformity across the application. 
• Simplicity in debugging and logging. 
• Better debug tools, like time-travel debugging. 
• Simpler data flow with a single source through which updates are dispatched.

27. What is the mental model of Redux-Saga?

 
Redux-Saga is middleware and is responsible for managing side effects like API requests, delays or other tasks in the background in a Redux application.

The mental model for redux-saga can be defined as follows:

• Sagas (the generator functions expected by redux-saga) are invoked by actions
• Sagas listen for specific actions and start async tasks
• When finished, the saga will be able to dispatch new actions to the store

This mental model provides a way to ground all the side effects and, as a result, allows reducers to remain pure. This also makes writing tests for async logic (i.e., testing async tasks) much easier.

28. What is middleware in Redux?

A middleware in redux is a function that exists between when an action is dispatched and when it reaches the reducer. Redux middleware allows developers to inspect the “whole” action dispatched from the action creator, when it is sent to redux and in the reducers. It can be used to log, inspect, alter, or affect the operation of dispatched actions.

Some common use cases include.

• Logging actions.
• Handling async calls (Redux Thunk, Redux Saga).
• Error tracking.

Example logging middleware:

const logger = store => next => action => {

  console.log("Dispatching:", action);

  return next(action);

};

29. What is the purpose of the applyMiddleware function in Redux?

When using redux, the applyMiddleware is one of the functions used during store creation to add a middleware or multiple middleware functions. applyMiddleware adds custom capabilities to redux, such as handling async actions or providing a debugging tool.

Example:

import { createStore, applyMiddleware } from "redux";

import thunk from "redux-thunk";

import rootReducer from "./reducers";

const store = createStore(rootReducer, applyMiddleware(thunk));

This will allow Redux to handle async tasks before the actions are sent to the reducer(s).

30. How do you handle asynchronous actions in Redux?

Redux can only support synchronous actions itself because reducers are pure functions and return a new state immediately. As a mechanism for handling async operations (e.g., API calls, timeouts, or fetching data), you will use middleware like redux-thunk or redux-saga.

The typical workflow would look like this:

1. You dispatch a request action to indicate that loading is occurring.
2. Then you perform the async task inside the middleware, and once it completes, you dispatch either a success or a failure action.

Example using Thunk:

const fetchTodos = () => async (dispatch) => {

  dispatch({ type: "FETCH_TODOS_REQUEST" });

  try {

    const response = await fetch("/todos");

    const data = await response.json();

    dispatch({ type: "FETCH_TODOS_SUCCESS", payload: data });

  } catch (error) {

    dispatch({ type: "FETCH_TODOS_FAILURE", payload: error });

  }

};

This keeps reducers pure, separating async logic from state updates.

31. What is Redux Thunk?

redux-thunk is a middleware that will allow you to write action creators that return functions instead of plain action objects. The returned functions can perform async operations and dispatch actions to the store when they complete.

• Helps to manage API calls or delayed actions.
• Keeps async logic out of reducers.
• Uses dispatch and getState.

32. How does Redux Thunk work?

Redux-thunk intercepts action creators that return a function instead of an action object. Because these received dispatch and getState as arguments, they can:

1. Access the current state.
2. Dispatch multiple actions before or after an async task.

Example flow:

const asyncAction = () => (dispatch, getState) => {

  dispatch({ type: "LOADING_START" });

  setTimeout(() => {

    dispatch({ type: "LOADING_END" });

  }, 2000);

};

Basically, redux-thunk provides Redux with a way to facilitate asynchronous side effects without violating the principle of pure functions as reducers.

33. What is Redux Toolkit?

Redux Toolkit is the official, recommended way of writing Redux logic. It provides a set of utilities that simplify common Redux tasks, including:

• Creating slices of state with createSlice().
• Automatically generating action creators and reducers.
• Configuring the store with defaults that include some middleware.
• To support immutable updates, redux toolkit uses Immer under the hood.

It reduces lots of boilerplate, making implementation faster and increasing maintainability.

Example:

import { createSlice, configureStore } from "@reduxjs/toolkit";

const todoSlice = createSlice({

  name: "todos",

  initialState: [],

  reducers: {

    addTodo: (state, action) => { state.push(action.payload); }

  }

});

const store = configureStore({ reducer: todoSlice.reducer });

34. What are the advantages of using Redux Toolkit?

Redux toolkit has many benefits over traditional redux:

1. Less boilerplate: occurs because it will automatically generate action creators and reducers.
2. Built-in best practices: redux toolkit comes with vendor JavaScript best practices, like building in redux-thunk as default middleware.
3. More simpler immutable updates: redux toolkit uses Immer internally, so it lets you write “mutating” code and be safe.
4. Improved scalability: createSlice lets large apps be split into modular slices.
5. Better dev experience: Works great with Redux DevTools, and is easier to test.

So really, RTK makes Redux development easier, less error-prone, more readable, and maintainable.

35. What is the purpose of action creators in Redux?

Action creators are functions that return action objects. The main benefit of action creators is to centralize and standardize action creation, which lowers the chance of making typos and allows for easier maintenance of your code.

Advantages:

• Can re-use action logic in multiple components
• Easier to test actions
• Cleaner components, because we can separate actions from directly constructing an action object.

Example:

const addTodo = (text) => ({

  type: "ADD_TODO",

  payload: { text }

});

Components then just use dispatch(addTodo(“Learn Redux”)) instead of creating the action object every time.

36. What is a “payload” in a Redux action?

 A payload is the property in a Redux action that contains additional data necessary to update the state. Payloads are not required but are a common way to pass information from a component, such as user input, API responses, and IDs, so the actions contain as much contextual information as possible.

Example:

const addTodo = {

  type: "ADD_TODO",

  payload: { id: 1, text: "Learn Redux" }

};

Using a payload creates a structured action format and separates the action type (what we want to do) from the data (how we want to do it).

37. What is the reducer function signature in Redux?

 A reducer is a pure function that takes two arguments:

1. state: The current state of the slice.
2. action: The action object that describes the alteration.

It produces a new state without mutating the state from which it is derived.

Example signature:

function reducer(state = initialState, action) {

  switch (action.type) {

    case "ACTION_TYPE":

      return newState;

    default:

      return state;

  }

}

Ultimately, this predictable signature keeps reducers pure and testable.

38. How do you reset state to its initial value in a reducer?

To reset state, you should just return the initial state object from the reducer when the specific action was dispatched (eg. RESET_STATE).

Example:

const initialState = { todos: [] };

function todoReducer(state = initialState, action) {

  switch (action.type) {

    case "RESET_STATE":

      return initialState;

    default:

      return state;

  }

}

This practice is useful in situations such as logging a user out, clearing forms or resetting a full app state to its defaults.

39. How do you set the initial state in Redux?

The initial state in Redux is defined when the reducer is first created, generally when a default value is provided for the state argument.

Example:

const initialState = { todos: [] };

function todoReducer(state = initialState, action) {

  switch (action.type) {

    case "ADD_TODO":

      return [...state.todos, action.payload];

    default:

      return state;

  }

}

Defining the initial state means the store has a defined starting point, which avoids errors returning undefined and also makes the state predictable.

Intermediate Level Redux Interview Questions

Intermediate questions about Redux are distinguished by topics such as async handling, middleware, Redux Toolkit, selectors, performance tuning, or state normalization. These Intermediate questions focus on the actual use of Redux in the real-world. These questions are appropriate for developers with some experience with React and Redux.

40. Is it necessary to keep all the component states in the Redux store?

No, It is not necessary to keep every component state in Redux. Only global or shared states, or shared data among components, should be stored in the Redux store. Local UI states such as form inputs, dialogs, or toggle buttons can normally remain in local component state with useState. 

For example, if I have this state in Redux:

• Redux state: User authentication information, API data, and shopping cart.
• Local state: Open or close a dropdown; value of an input field.

Using install only relevant state within Redux helps maintain simplicity and improves performance.

41. What are the problems that Redux solves?

Redux solves a number of problems that are common in large applications, including:

1. State management complexity: It centralizes state into one place; without Redux, you may have dispersed pieces of state among different components.
2. Predictability: Pure reducers and a single source of truth make state changes predictable.
3. Debugging difficulties: Time-travel debugging and logging state changes allow you to go back in time to see how the state evolved.
4. Consistency across components: Two or more components can pull from the same piece of state without prop drilling.
5. Asynchronous handling: It is easier to manage async state updates using standard middleware such as Thunk or Saga.

Overall, Redux facilitates the scaling of applications by maintaining state in an organized, predictable, and testable manner.

42. What are the advantages of using Redux over local component state?

There are a few benefits to Redux from local component state:

• Centralization: You now have one place to manage all of your global data.
• Debugging: The Redux DevTools allow you to time-travel, inspect the state at any moment in an application, and log actions.
• Directional data flow: Unidirectional data flow will create a more predictable method of updating the state.
• Sporting events: As applications get larger, it will be easier for teams to collaborate if the application with a place to manage state has a consistent state pattern.
• Built-in middleware: You can handle logging, error tracking or anyone of your async tasks using standard middleware.

With great state management comes great responsibilities. For very small applications, however, Redux may simply make things more complex. I would say that it is most useful when large amounts of state will be shared amongst different components or an application’s state requires a lot of complex management.

43. What is the difference between Redux and React’s local state?

Redux is designed for global and shared state, while local state is applicable to component-specific state.

44. What is the difference between Redux and Context API?

Redux and Context API can handle global state, but there are important differences:

Use the Context API for simple state sharing; Redux is more appropriate for complex state logic that has async operations or larger applications.

45. Differentiate between React Redux and React’s Context API

React Redux and React’s Context API can manage and share state, but they have different use cases and performance characteristics.

Use case:

• Use Redux when building complex applications with shared state, async logic, and predictable state management.
• Use the Context API when you have a plan for a simple state sharing solution, such as theme, user preferences, or language settings.

46. How do you handle side effects in Redux (e.g., fetching data from an API)?

Side effects in redux are performed using middleware and are executed between action dispatch and reducer. Middleware may be leveraged in a variety of ways when handling side effects. Here are a few common tactics:

1. Redux Thunk: Allows you to write action creators (But return function) and perform async operations.
2. Redux Saga: Use generator functions to handle async operations in a more structured approach.
3. Redux Observable: Uses RxJS and allows you to create reactive async operations.

Example with Redux Thunk:

const fetchTodos = () => async (dispatch) => {

  dispatch({ type: "FETCH_TODOS_REQUEST" });

  try {

    const response = await fetch("/todos");

    const data = await response.json();

    dispatch({ type: "FETCH_TODOS_SUCCESS", payload: data });

  } catch (error) {

    dispatch({ type: "FETCH_TODOS_FAILURE", payload: error });

  }

};

Middleware permits various side effects while able to maintain the constant data flow and predictable state by upholding the purity of the reducer.

47. How does redux-saga differ from redux-thunk in handling asynchronous actions?

 Key differences:

At last, Redux Thunk is light and simple while redux-saga provides a more organized and safer way to implement complex async workflows.

48. What is redux-saga?

Redux-Saga is a middleware library for redux that uses ES6 generator functions to yield side effects such as API calls, delays, or complex async flows.

Some features include:

• Having the ability to handle async actions away from reducers.
• Having the ability to cancel actions, debounce or throttle actions, and handle concurrent tasks.
• Makes complex async flows easier to understand and easier to test.

Example basic saga:

import { takeEvery, call, put } from "redux-saga/effects";

function* fetchTodosSaga() {

  try {

    const data = yield call(fetch, "/todos");

    const todos = yield data.json();

    yield put({ type: "FETCH_TODOS_SUCCESS", payload: todos });

  } catch (error) {

    yield put({ type: "FETCH_TODOS_FAILURE", payload: error });

  }

}

export function* watchTodos() {

  yield takeEvery("FETCH_TODOS_REQUEST", fetchTodosSaga);

}

Redux-Saga provides control and allows for a better organization of async logic, especially for larger-scale applications where async logic gets complicated and should be controlled better.

49. What are the differences between call() and put() in redux-saga?

In redux-saga, call() and put() are effect creators to manage side effects:

• call(): Invoke a function (asynchronous usually), and wait for the results. This is like calling a function in a saga, and it makes the generator controllable in terms of testing.
• put(): Dispatch an action to the redux store. This is like dispatch() in redux.

Example:

import { call, put } from "redux-saga/effects";

import { fetchData } from "./api";

function* fetchSaga() {

  try {

    const data = yield call(fetchData); // Waits for API response

    yield put({ type: "FETCH_SUCCESS", payload: data }); // Dispatches success action

  } catch (error) {

    yield put({ type: "FETCH_FAILURE", payload: error });

  }

}

Summary:

• call() = invoke function (usually async)
• put() = dispatch action

50. What is the purpose of the createAsyncThunk function in Redux Toolkit, and how does it simplify async logic?

createAsyncThunk is a utility function in Redux Toolkit (RTK) that is made for making async action creation easier. It automatically creates the pending, fulfilled, and rejected action types associated with a single async operation, therefore it reduces boilerplate.

Example:

import { createAsyncThunk } from "@reduxjs/toolkit";

export const fetchTodos = createAsyncThunk(

  "todos/fetchTodos",

  async () => {

    const response = await fetch("/todos");

    return response.json();

  }

);

Benefits:

• There is no need to manually create request, success, and failure actions.
• It can work with createSlice reducers without any issues.
• It handles the promise lifecycles for you.

51. What is createSlice in Redux Toolkit and how does it work?

createSlice is a function in Redux Toolkit that combines reducers and action creators together in an object called a “slice.”

Key points:

• Creates a slice from the state by defining name, initialState, and reducers.
• Provides action creators to every reducer automatically.
• Provides mutable updates for your store using Immer behind the scenes.

Example:

import { createSlice } from "@reduxjs/toolkit";

const todoSlice = createSlice({

  name: "todos",

  initialState: [],

  reducers: {

    addTodo: (state, action) => { state.push(action.payload); },

    removeTodo: (state, action) => state.filter(todo => todo.id !== action.payload)

  }

});


export const { addTodo, removeTodo } = todoSlice.actions;

export default todoSlice.reducer;

52. How does Redux Toolkit’s createSlice simplify reducer and action creation?

In Redux, you’ll generally have to do the following:

1. Define constants for action type
2. Manually write an action creator
3. Write a switch-case for reducers.

createSlice reduces boilerplate code in the following ways:

• Creates action creators from reducer functions automatically
• Allows you to write code that “mutates” state, using Immer
• Combines slice name, actions, and reducer

Ultimately makes for less boilerplate code that is more readable, maintainable, and less buggy.

53. What are “slice reducers” in Redux Toolkit?

Slice reducers are the actual reducer functions created inside createSlice. Each slice reducer corresponds to an action and defines how that action will update the slice state.

Example:

const todoSlice = createSlice({

  name: "todos",

  initialState: [],

  reducers: {

    addTodo: (state, action) => { state.push(action.payload); }, // slice reducer

    removeTodo: (state, action) => state.filter(todo => todo.id !== action.payload) // slice reducer

  }

});

Slice reducers allow you to logically separate state based on features, rather than assigning everything to a large root reducer.

54. What is the role of Immer in Redux Toolkit?

Immer is used with the Redux Toolkit to increase the ease of updating immutable state. In Redux, you have to explicitly create new state objects to avoid the mutation of the existing state. Immer lets you write code that looks like you are mutating state, while actually creating new immutable state underneath.

Example:

const todoSlice = createSlice({

  name: "todos",

  initialState: [],

  reducers: {

    addTodo: (state, action) => {

      state.push(action.payload); // Looks like mutation, but Immer handles immutability

    }

  }

});

Benefit: Tidy and more readable code without sacrificing Redux’s principles of immutability.

55. How do you structure your top-level directories in Redux?

A logical and common top level Redux directory structure saves organization and scalability:

src/

├── app/          # Store configuration and root reducer

├── features/     # Feature-specific slices and reducers

│   └── todos/

│       ├── todosSlice.js

│       └── todosSelectors.js

├── components/   # UI components

├── services/     # API calls or async logic

└── utils/        # Utility functions, constants

This structure allows you to organize based on features and substantiates easier navigation, as well as develop in a modular way for larger applications.

56. How do you structure large Redux applications to keep the codebase maintainable?

For even moderately complex applications, I suggest the following practices:

1. Feature-based folders: Combine feature slices, selectors, and async logic as individual feature units.
2. Use Redux Toolkit: It reduces boilerplate, It standardizes best practices, and It offers utility functions to help define best practices. 
3. Selectors: If a component accesses multiple state pieces, then your state traversal logic is encapsulated in a selector and only needs to be traversed once.
4. Middleware organization: Group all Thunks, Sagas, or Observables by location.
5. UI and state separation: In enterprise-level applications, components should consume state via selectors and dispatch actions to their reducer without knowledge of the business logic.

This approach leads to better readability, testability, and scalability over time with enterprise level applications.

57. What are selectors in Redux?

Selectors are functions that allow you to extract smaller portions of state from your Redux store. Selectors encapsulate state access logic so that your components don’t need to know about the collection or shape of your store.

Example:

const selectTodos = (state) => state.todos;

const selectCompletedTodos = (state) => state.todos.filter(todo => todo.completed);

Advantages:

• Selectors are reusable across components
• You can easily refactor your state structure without needing to change the component that is using the state
• When used with Reselect (or similar libraries), selectors may improve performance

58. What is the purpose of the Reselect library in Redux?

Reselect is a library that enables you to create memoized selectors. When you memoize something, it means that it will only “recompute” when its inputs change, which will help you prevent unneeded re-renders and optimize performance in a large app.

Example:

import { createSelector } from 'reselect';

const selectTodos = state => state.todos;

const selectCompletedTodos = createSelector(

  [selectTodos],

  todos => todos.filter(todo => todo.completed)

);

Some benefits of using Reselect:

• It minimizes expensive calculations.
• It helps maintain performant components with frequently changing state.
• It pairs well with React-Redux hooks like useSelector.

59. How do selectors improve performance?

Selectors can help improve performance by wrapping logic for accessing state and also since they can go hand-in-hand with other memoization (like Reselect) as selectors will not recompute unnecessarily.

Example with Reselect:

import { createSelector } from 'reselect';

const selectTodos = state => state.todos;

const selectCompletedTodos = createSelector(

  [selectTodos],

  todos => todos.filter(todo => todo.completed) // Computed only if `todos` changes

);

Some benefits of Selectors:

• They can avoid recalculating derived data on every render.
• They help avoid unnecessary re-renders of components when unrelated parts of state are updated.
• The code conforms to a more maintainable and consistent format.

60. How do you optimize performance in a React Redux application?

When considering performance optimization in a React Redux application, several things to keep in mind include:

1. Use Memoized Selectors (Reselect) before calculating something that is unnecessarily recalculated again.
2. Only subscribe or select the slices of state a component needs, do not over-subscribe.
3. Split your reducer and slices if only a few parts of state will cause your component to re-render.
4. Use React.memo or PureComponent when using class instances and functional instances that you want to stop from re-rendering.
5. If you have multiple dispatches and they could be batched, when possible, do it.

If you follow all best practices, you can ensure your UI happen efficiently and will not cause unnecessary computation or re-renders.

61. How do you prevent unnecessary renders in Redux-connected components?

You can prevent unnecessary renders by doing the following:

1. Using memoized selectors with Reselect.
2. Selecting the state you need in mapStateToProps or useSelector.
3. Use React.memo for functional components to skip any re-render if props do not change.
4. Remove any inline functions or passed objects in props, as they will recreate new references on every render.

Example:

const todos = useSelector(selectCompletedTodos); // Memoized selector prevents extra computation

const TodoList = React.memo(({ todos }) => { ... });

This will ensure that the component will only re-render when the relevant slice of state is updated.

62. What are the best practices for managing complex state in Redux?

To manage complex state:

• Use slices: Use createSlice to create feature-specific slices of state. 
• Normalize state: Store your relational data as objects with ids instead of deeply nested arrays. 
• Use selectors: Encapsulate access to derived data; avoid repetition of derived data logic. 
• Use middleware: Use Thunks or Sagas when dealing with async operations. 
• Keep reducers pure: Avoid side effects in reducers; keep them in your middleware.
• Avoid maintaining UI state in global state: Keep ephemeral stuff in component state.

These practices will help you maintain clarity, scale, and testability.

63. What is state normalization in Redux and why is it important?

State normalization is the practice of storing related entities in a flat structure using ids instead of nested objects or arrays.

Example of normalized state:

{

  users: {

    byId: {

      1: { id: 1, name: "Ayaan" },

      2: { id: 2, name: "Alam" }

    },

    allIds: [1, 2]

  }

}

The benefits of normalization include:

• Simplicity of updates, additions, and deletions of entities without needing to mutate deeply nested objects or arrays. 
• No duplicate data. 
• Improved performance of selectors and rendering. 
• It provides a more predictable way of treating relational data (like posts and users, etc.).

64. How do you structure a normalized state?

A normalized state shape flattens nested data and organizes entities in a dictionary-like structure, typically consisting of two parts:

1. byId: an object that maps ids to entities.
2. allIds: an array of all ids to preserve order.

Example:

const normalizedState = {

  todos: {

    byId: {

      1: { id: 1, text: "Learn Redux", completed: false },

      2: { id: 2, text: "Write tests", completed: true }

    },

    allIds: [1, 2]

  }

};

Benefits:

• Easier updates and deletes.
• Avoids deeply nested mutations.
• Simplifies selectors and calculating derived state.

65. What are normalized state shapes, and why are they important in Redux?

Normalized state shapes are flat structures that store referenced related entities by id instead of nesting related objects inside one another.

Why they matter:

• Easier updates: You can simply update an entity in one location without needing to edit nested copies of an entity.
• Performance gains: Shallow updates to state can be faster and prevent unnecessary re-renders.
• Consistency: You avoid duplicating entities and ensure relationships behave as expected.
• Scalability: Normalized state shapes are essential to utilize and navigate large applications with complex relational data.

66. How do you test Redux reducers and actions?

Testing your Redux reducers and actions ensures that the reducer updates the state and that action creators work as expected.

• Reducers: You should test that when given an initial state and an action, the reducer returns the new state you expect.
• Actions: You should test that your action creators return the action object you expect.

Example:

// Action test

expect(addTodoAction("Learn Redux")).toEqual({

  type: "ADD_TODO",

  payload: "Learn Redux"

});

// Reducer test

const initialState = [];

expect(todoReducer(initialState, addTodoAction("Learn Redux")))

  .toEqual([{ text: "Learn Redux" }]);

67. How do you write unit tests for Redux reducers, actions, and middleware?

• Reducers: To test reducers, you will need to test how a reducer handles actions. This requires doing an input-output type test for sample action objects.
• Actions: You will want to use test assertions to test if the action creators return the expected action object.
• Middleware: You’ll need to use assertions to verify the actual side effect of a dispatch when testing middleware.

Example for Thunk middleware:

const mockDispatch = jest.fn();

const thunkAction = fetchTodos(); // returns a function

await thunkAction(mockDispatch);

expect(mockDispatch).toHaveBeenCalledWith({ type: "FETCH_TODOS_REQUEST" });

Best practices:

• Keep tests deterministic and pure
• Mock asynchronous calls so you have a clear picture of what data to expect when testing. 
• Test edge cases. This would involve considering empty or invalid data/states.

68. What is Redux DevTools?

Redux DevTools is an open source browser add-on (browser extension) (and a library) that allows for introspection and debugging into the orbital state changes of a Redux application.

Features:

• View all dispatched actions in the order that dispatched
• Inspecting what the current snapshot and past snapshots had values
• Time-traveling ability to rewind actions or replay actions
• Observing async flows and middleware side effects

Integration example:

import { configureStore } from '@reduxjs/toolkit';

import todoReducer from './todoSlice';

const store = configureStore({

  reducer: { todos: todoReducer },

  devTools: process.env.NODE_ENV !== 'production'

});

Redux DevTools provides an improved debugging and development experience, especially when developing more complex applications based around state.

69. What are some of the major features of Redux DevTools?

Redux DevTools offers several powerful features for debugging and monitoring state:

• Action log: see all dispatched actions in order.
• State snapshots: inspect the state of your store before and after each action.
• Time-travel debugging: rewind actions or replay actions to debug state changes.
• Action filtering: filter actions by type to filter only those actions relevant to a update.
• Performance monitoring: identify performance issues due to slow or repeatedly dispatched actions.
• Middleware integration: visualize async actions dispatched through a Thunk or Saga.

All of these features help developers debug their application, optimize and improve performance, and understand the flow of state within large Redux applications.

70. What is time-travel debugging in Redux?

Time travel debugging allows you to rewind and replay actions dispatched to Redux to visualize state changes over time.

Example:

• Dispatch some actions: ADD_TODO, TOGGLE_TODO, REMOVE_TODO.
• Using Redux DevTools, you can step back in time, inspecting the state of the store before a particular action; then step forward in time to see the effects of that action.

Benefits of time travel debugging:

• Easily reproduce bugs and (hopefully!) fix them.
• Understand how multiple actions cascade in a changing state.
• Confirm that reducers are working correctly.

71. How can you access a Redux store outside a React component?

There are use cases where you will want or need access to a Redux store outside of a React component, such as middleware, utility functions, or external modules.

Example:

import store from './store';

// Access state

const todos = store.getState().todos;

// Dispatch action

store.dispatch({ type: "ADD_TODO", payload: "Learn Redux" });

This enables programmatic state updates, or you could read store data without using either useSelector or connect.

72. How do you use hooks like useDispatch and useSelector in React functional components?

React-Redux has hooks for you to wire functional components to the Redux store, which are:

• useDispatch: gives you the dispatch function to send actions to the store,
• useSelector: gives you the ability to extract state from the Redux store using a selector function.

Example:

import { useDispatch, useSelector } from 'react-redux';

import { addTodo } from './todoSlice';

function TodoComponent() {

  const todos = useSelector(state => state.todos);

  const dispatch = useDispatch();

  const handleAdd = () => {

    dispatch(addTodo({ id: 1, text: "Learn Redux" }));

  };

  return (

    <div>

      <button onClick={handleAdd}>Add Todo</button>

      <ul>

        {todos.map(todo => <li key={todo.id}>{todo.text}</li>)}

      </ul>

    </div>

  );

}

Hooks also reduce boilerplate to get access to state and the dispatch method without needing connect or class components.

73. How do you handle form state management in Redux?

Form state can be managed in Redux when you will need to share form data between components or persist form data.

Approaches:

1. Manual form slice: Create a new slice in Redux that has the form fields as part of redux.

const formSlice = createSlice({

  name: "form",

  initialState: { username: "", email: "" },

  reducers: {

    updateField: (state, action) => {

      state[action.payload.field] = action.payload.value;

    },

    resetForm: () => ({ username: "", email: "" })

  }

});

2. You can then dispatch actions on input change:

dispatch(updateField({ field: "username", value: "Ayaan" }));

3. You can also select the form state and use selectors when you need to reference that in a component.

Best practices:

• If the form needs to be presented locally, keep form state local and not global. 
• Use Redux only when you are sharing data between many other components or components need to persist information.

74. What are the trade-offs of keeping form state in the Redux store?

 Advantages:

• Allows form state to be shared across many components.
• Simple to persist form state (e.g. redux-persist).
• Easier to centrally validate or submit data.

Disadvantages / Trade-offs:

• There is potential for unnecessary re-renders, since any change modifies the global state.
• More boilerplate for small or short forms.
• More challenging to work with simple forms that do not need the global state.

Best practice:

• Store form state in Redux only if it is shared, persistent, or critical to your application logic, otherwise use local state.

75. How would you implement undo/redo functionality in a Redux application?

Undo/redo can be implemented by maintaining history in the Redux store:

1. Hold previous states in an array.
2. References a pointer to the current state.
3. Dispatch UNDO or REDO actions to the modified pointer and restore previous or future states.

Example using redux-undo library:

import undoable from 'redux-undo';

import todoReducer from './todoReducer';

const undoableTodos = undoable(todoReducer);

export default undoableTodos;

Now, UNDO and REDO actions are automatically taken care of – making time travel and state recovery very simple.

76. How do you handle authentication in a Redux application?

You can have a Redux slice for authentication state (user info, tokens, login state, etc.):

const authSlice = createSlice({

  name: 'auth',

  initialState: { user: null, token: null, isAuthenticated: false },

  reducers: {

    loginSuccess: (state, action) => {

      state.user = action.payload.user;

      state.token = action.payload.token;

      state.isAuthenticated = true;

    },

    logout: (state) => {

      state.user = null;

      state.token = null;

      state.isAuthenticated = false;

    }

  }

});

• Dispatch loginSuccess after the API login is successful.
• Dispatch logout upon sign out.
• Optionally, you can persist the authentication state through redux-persist or session storage.

77. How do you manage user authentication and session state in Redux?

Managing authentication and session state is about:

1. Storing tokens: You can store JWT or session tokens in Redux (and optionally persist them).
2. Storing user info: You can store certain user profile | role data in a slice.
3. Handling API requests: You can attach tokens in headers through middleware like Axios interceptors.
4. Automatic logout | token refresh: middleware or sagas can check for expired tokens and refresh them.
5. Securing state: Only place sensitive information in Redux if you know client-side scripts can’t access it.

You will also have a consistent authentication state throughout the app.

78. How does the redux-persist library work?

redux-persist is a library that takes care of saving Redux state to a storage engine (such as localStorage) and rehydrating that state upon a page reload.

Key points:

• Your root reducer needs to be wrapped with persistReducer.
• Your storage engine can be localStorage, sessionStorage, AsyncStorage (if using React Native), etc.
• Wrap your app in PersistGate to delay the rendering of your app until the persisted state has been rehydrated.

Example:

import { persistStore, persistReducer } from 'redux-persist';

import storage from 'redux-persist/lib/storage';

import { configureStore } from '@reduxjs/toolkit';

import rootReducer from './rootReducer';

const persistConfig = { key: 'root', storage };

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({ reducer: persistedReducer });

const persistor = persistStore(store);

Advantages:

• Keeps user data continuous across page reloads.
• Easy session and app state management.
• Works seamlessly with Redux Toolkit and middleware.

Advanced Level Redux Interview Questions

Advanced Redux questions are designed for senior developers and other professionals who want to learn to work with complex state management, middleware, side-effects, server-side rendering (SSR), real-time updates, TypeScript, and performance tuning or optimization. This section prepares you for a technical interview at a larger tech company, so you have the best ability to explain architecture decisions, why optimization is needed, and any redux patterns learned post-tutorial(s) during the interview.

79. Explain the typical data flow in an application made using React and Redux (Redux Lifecycle for an application)

Redux only follows a unidirectional data flow. Because of this aspect, all state changes become predictable. The standard redux lifecycle is as follows:

1. Action Dispatch from UI: The UI component dispatches (using dispatch()) an action to signal that something has happened.
2. Interception by Middleware: Middleware, like Thunk or Saga, can intercept the dispatched action for side-effects or logging.
3. Action Processed: The action makes its way to all reducers, which can calculate a new state given the old state and the dispatched action.
4. Updating State: Redux store will update the new state immutably.
5. Updating UI: Any components that subscribed to the Redux store (by way of connect or useSelector) will re-render the new state into the UI.

Diagrammatically:

Component → Action → Middleware → Reducer → Store → Component

The data flow in Redux enables predictability, debuggability, and separation of concerns.

80. What are the things which we should never do inside a reducer?

Reducers are pure functions, so you should never do the following inside a reducer:

• Mutating state directly: You should always return a new state object.
• Doing side effects: No API calls, no logs, no timers, and no async operations.
• Generating random values: If a function generates random values or depends on the date or time, it will cause the reducer to be impure.
• Calling non-pure functions: Non-pure functions are functions that depend on external state (global variables).

Example of an incorrect reducer:

const counterReducer = (state = 0, action) => {

  console.log("Action received:", action); //  Side effect

  return state + Math.random(); //  Non-deterministic

};

The correct way is to return a deterministic new state:

const counterReducer = (state = 0, action) => {

  switch (action.type) {

    case "INCREMENT":

      return state + 1;

    default:

      return state;

  }

};

81. How can the addition of multiple middlewares to Redux be done?

Middlewares can be added in multiple ways. You can use Redux’s applyMiddleware function or use the middleware configuration inside Redux Toolkit.

Example using Redux:

import { createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';

import logger from 'redux-logger';

import rootReducer from './rootReducer';

const store = createStore(rootReducer, applyMiddleware(thunk, logger));

• Middlewares get called in order.
• Each middleware receives { dispatch, getState } and can use next(action) to move the action down the middleware chain.

82. How do you write a custom middleware for Redux?

A Redux middleware is simply a function that intercepts actions before they reach reducers. The signature is:

const customMiddleware = store => next => action => {

  // Middleware logic

  return next(action); // Forward action

};

How to write a middleware:

1. Accept store as the first argument.
2. Accept next as the second argument to move the action down the middleware chain.
3. Implement your logic (logging, modifying action, async calls).
4. Call next(action) to send the action down the chain.

83. Write a custom middleware in Redux that logs every action dispatched

Here’s a simple logger middleware use case:

const loggerMiddleware = store => next => action => {

  console.log("Dispatching action:", action);

  const result = next(action); // Forward action to reducer

  console.log("Next state:", store.getState());

  return result;

};

// Usage

import { createStore, applyMiddleware } from 'redux';

import rootReducer from './rootReducer';

const store = createStore(rootReducer, applyMiddleware(loggerMiddleware));

Explanation:

• Logs the action and payload before it gets to the reducer.
• Logs the value of the state after the reducer has processed the action.
• Allows you to debug multiple flows without redux devtools.

84. What is the “Ducks” pattern in Redux?

The Ducks pattern is a way to organize your Redux code by feature rather than by type (actions, reducers, constants). A “duck” file will contain all the logic for one feature:

• Action types
• Action creators
• Reducers

Example todos.js using Ducks:

// Action types

const ADD_TODO = 'todos/ADD_TODO';

const REMOVE_TODO = 'todos/REMOVE_TODO';

// Action creators

export const addTodo = (todo) => ({ type: ADD_TODO, payload: todo });

export const removeTodo = (id) => ({ type: REMOVE_TODO, payload: id });

// Reducer

const initialState = [];

export default function todosReducer(state = initialState, action) {

  switch(action.type) {

    case ADD_TODO: return [...state, action.payload];

    case REMOVE_TODO: return state.filter(todo => todo.id !== action.payload);

    default: return state;

  }

}

Benefits:

• Keeps the logic of the feature contained in one area.
• Easier to scale and maintain larger applications.
• Eliminates having to deal with boilerplate code and scattering files.

85. What are Higher Order Reducers (HORs) and how are they used?

Higher Order Reducers (HORs) are functions that take a reducer and return a new reducer with enhanced functionality. They allow for the same logic to be reused over multiple reducers.

For example, you can enhance the “reset” functionality of any reducer.

const resettable = (reducer, resetActionType) => (state, action) => {

  if (action.type === resetActionType) return undefined; // reset state

  return reducer(state, action);

};

const counterReducer = (state = 0, action) => {

  switch(action.type) {

    case 'INCREMENT': return state + 1;

    default: return state;

  }

};

</pre>

export default resettable(counterReducer, ‘RESET_COUNTER’);

Use case:

• Undo/redo
• Resetting state slices
• Logging or performance tracking

86. Can you explain reducer composition and its benefits?

Reducer composition is the process of combining smaller, more specific reducers into a larger reducer. In Redux, it can be done easily with combineReducers.

Example:

import { combineReducers } from 'redux';

import todosReducer from './todos';

import authReducer from './auth';


const rootReducer = combineReducers({

  todos: todosReducer,

  auth: authReducer

});

export default rootReducer;

Benefits:

• Promotes modularity and separation of concerns.
• Simplicity of testing standalone reducers.
• Makes large applications scalable and maintainable.

87. How do you handle complex async data flows in Redux, like multiple API calls that depend on each other?

For complex async flows:

1. You can use middleware such as redux-thunk or redux-saga.
2. You define task sequences based on each response of the previous call:

Example with Thunk:

export const fetchUserAndPosts = (userId) => async (dispatch) => {

  dispatch({ type: 'FETCH_START' });

  const user = await fetch(`/api/users/${userId}`).then(res => res.json());

  dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });

  const posts = await fetch(`/api/users/${userId}/posts`).then(res => res.json());

  dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: posts });

};

• redux-saga is great for managing dependencies and multiple calls in parallel with call(), all() and race() in more complex flows.

88. How do you handle race conditions in Redux?

Race conditions occur when several async actions are trying to update the same state in an unpredictable way. 

Solutions:

1. Cancel outdated requests:
   • With redux-saga and takeLatest(), it will automatically cancel previous pending tasks.
2. Track request IDs:
   • Store a requestId in state and ignore responses that do not match the latest request.
3. Sequence-dependent requests:
   • Make certain that dependent calls wait for the previous call.

Example with redux-saga:

import { takeLatest, call, put } from 'redux-saga/effects';

import { fetchUserApi } from './api';

function* fetchUserSaga(action) {

  const user = yield call(fetchUserApi, action.payload.id);

  yield put({ type: 'FETCH_USER_SUCCESS', payload: user });

}

export function* watchFetchUser() {

  yield takeLatest('FETCH_USER_REQUEST', fetchUserSaga);

}

Benefit:

• Guaranteed state consistency and avoidance of stale data updates.

89. How do you implement optimistic UI updates in Redux?

Optimistic UI updates are about optimistically updating the UI before the server response is received, which leads to a better perceived performance for the user.

Steps to implement:

1. First, update the Redux state immediately as soon as the action is dispatched.
2. Then perform the API call asynchronously.
3. If the API call fails, we can then roll back the state to its previous version.

Example using Thunk:

export const addTodoOptimistic = (todo) => async (dispatch, getState) => {

  // Save current state

  const previousTodos = getState().todos;

  // Optimistically update

  dispatch({ type: 'ADD_TODO', payload: todo });

  try {

    await api.addTodo(todo); // Call API

  } catch (error) {

    // Rollback on failure

    dispatch({ type: 'SET_TODOS', payload: previousTodos });

  }

};

Benefit:

• This allows the connection to feel much more responsive to users and, therefore, a better user experience.
• We have to be careful with errors to not create inconsistent states.

90. How do you implement optimistic updates with Redux?

Optimistic updates follow the same steps:

• Dispatch state update right away.
• Do the API call in the background (Thunk or Saga)
• Once we receive the response from the API, if it is a failure, we roll back the state to the last version.

With redux-saga:

function* addTodoSaga(action) {

  const prevState = yield select(state => state.todos);

  yield put({ type: 'ADD_TODO', payload: action.payload }); // Optimistic

  try {

    yield call(api.addTodo, action.payload);

  } catch (error) {

    yield put({ type: 'SET_TODOS', payload: prevState }); // Rollback

  }

}

Key point: Rollbacks make optimistic updates safe.

91. What are some common performance pitfalls in Redux, and how do you avoid them?

Common pitfalls:

1. Over-Subscribed Components: Your components update based on otherwise unrelated pieces of state
2. Unnecessarily large payload objects: Dispatching large objects can cause your app to slow down.
3. Mutated state in any way: This is a great source of hard-to-find bugs, especially if you are using memoization or anything else that relies on immutability.
4. Deeply nested state for complex state: This increases the cost it takes to maintain the deep state.
5. Non-memoized selectors: When derived data is recomputed, the cost can be unnecessary.

Solutions:

• Use memoized selectors (reselect)
• Keep your state flat and normalized.
• Use React.memo or PureComponent
• Dispatch minimal and precise payloads
• Do not store ephemeral UI state in Redux.

92. How do you optimize the performance of mapStateToProps functions?

• Use selectors to calculate derived data before mapStateToProps.
• Memoize selectors with Reselect to avoid performing unnecessary calculations.
• Only select to the piece of state that is relevant to the component.
• Do not create objects or arrays inside mapStateToProps (otherwise you will create new references on each render).

Example:

const selectCompletedTodos = createSelector(

  state => state.todos,

  todos => todos.filter(todo => todo.completed) // Memoized

);

const mapStateToProps = state => ({

  completedTodos: selectCompletedTodos(state)

});

This ensures the components only re-render when the relevant piece of the state tree changes.

93. How do you optimize Redux action dispatch and payload size?

• Dispatch the minimum payloads needed: You do not always need to send the entire state.
• Use IDs instead of the whole object: For all relational data, only send the IDs and retrieve the data from the store instead.
• Batch multiple actions together: When possible, group the updates into a single dispatch.
• Use Thunks or Sagas to perform asynchronous updates: If you have large payloads, avoid dispatching them every time from the UI.

Example:

// Instead of sending full todo object

dispatch({ type: 'TOGGLE_TODO', payload: todo.id }); //  Smaller payload

Benefits:

• Reduce memory consumption.
• Reduce render cycles and use less network.
• Increases the performance of the application, especially when the state tree is large.

94. How does server-side rendering (SSR) work with Redux in a React application?

With SSR, a new Redux store is created on the server for each request, which means the server can render the app with the initial state.  

Steps to implement SSR:

1. Create a new Redux store instance for each request.
2. Dispatch actions to add initial data to the store.
3. Render the React application into an HTML string using ReactDOMServer.renderToString().
4. Send the rendered HTML string and the serialized Redux state to the client. 
5. On the client, rehydrate the Redux store with the initial state.

Example:

const store = configureStore({ reducer: rootReducer });

await store.dispatch(fetchInitialData());

const html = ReactDOMServer.renderToString(

  <Provider store={store}>

    <App />

  </Provider>

);

const preloadedState = store.getState(); // Send this to client

Benefits:

• Fast initial page load.
• SEO-ready content.  
• The client can continue seamlessly with the renewed store state.

95. How do you approach migrating a legacy application state management to Redux?

Strategies for migrating legacy state management.

1. Define your global state: Identify which segments of the app’s existing state should migrate to Redux.
2. Migrate diligence: Only tackle one feature or module at a time, rather than a complete rewrite.
3. Create your slices: Define your reducers and actions for the migrated state.
4. Replace legacy state with Redux: Wherever the legacy state was accessed, swap it with either useSelector or connect.
5. Middleware: Use redux middleware for chaining async redux functions or logging.
6. Test every migration step: Make sure that the migration has no regressions.

Tip: Try to migrate shared state first, and leave all component-related state as is. Only migrate the component-related state when necessary.

96. How would you migrate from a traditional Redux setup to using Redux Toolkit in a project?

 Steps to migrate:

1. Install Redux Toolkit: @reduxjs/toolkit.
2. Use configureStore instead of createStore and combineReducers
3. Use createSlice to convert your reducers into slices and also take care of any actions that have been created.
4. Replace your action creators with the autogenerated actions from the slices you created.
5. Optional: migrate middleware and DevTools to the Toolkit setup which is much simpler.

Example:

// Old

const store = createStore(rootReducer, applyMiddleware(thunk));

// New Redux Toolkit

import { configureStore } from '@reduxjs/toolkit';

import todosReducer from './todosSlice';

const store = configureStore({ reducer: { todos: todosReducer } });

Benefits:

• Reduces some boilerplate.
• Manages async logic with createAsyncThunk. 
• DevTools and middleware set up is built-in.

97. How does Redux handle state persistence and rehydration?

Redux doesn’t keep state around, but you can use libraries to help you do that like redux-persist

• Persisting: Takes Redux state and saves it to storage (e.g., localStorage, sessionStorage, AsyncStorage)
• Rehydration: When your app loads, any persisted state is put back into the store before render.

Example with Redux Toolkit:

import { persistReducer, persistStore } from 'redux-persist';

import storage from 'redux-persist/lib/storage';

import { configureStore } from '@reduxjs/toolkit';

import rootReducer from './rootReducer';

const persistConfig = { key: 'root', storage };

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({ reducer: persistedReducer });

const persistor = persistStore(store);

Benefits:

• Retain user data across reloads.
• Easier session management and offline capability.

98. How do you ensure that a Redux store is not getting too large?

If you want to avoid bloat in Redux store:

1. Store only what you need: Store component-local state for ephemeral UI state.
2. Normalize your state: Use flatten structures rather than nested states to avoid duplicates.
3. Store IDs rather than objects: Use references to entities by ID to avoid the cost of duplicating payload
4. Slice your state: Keep states separate so that you don’t have a single root reducer.
5. Persist what you need: Instead of persisting the state of the entire store, only persist the states that you need.
6. Watch your store size: Use Redux DevTools or your own log to track the growth of store.

Benefits:

• Saves memory. 
• Prevents unnecessary re-renders. 
• Improves application performance and maintainability.

99. What strategies would you use for scaling Redux actions and reducers?

If you want to scale Redux actions and reducers in a large application:

1. Feature-based structure or a tree (Ducks pattern): Keep actions, reducers and constants together for a given feature, so that it can exist independently.
2. Break reducer compositions: This is to avoid a “huge” reducer, ANY REDUCER SHOULD HAVE A SPECIFIC RESPONSIBILITY. Use combineReducers with specific reducer compositions.
3. Standardized actions: Use a conventional structure for action names (feature/actionType).
4. Handle async: Use a middleware like redux-thunk or redux-saga with async actions.
5. Reusable Higher-order Reducers (HOR): to add functionality like reset, logging and/or undo/redo.

Benefits:

• Improves maintainability and code readability.
• Less duplication, less boilerplate
• Facilitate large team collaboration.

100. How do you manage complex application state with Redux?

Strategies:

1. Normalize state: De-normalize nested objects, and allow relationships via IDs.
2. Divide the application state into slices: Change to use multiple reducers for features that logically separate
3. Write selectors: use memoized selectors (i.e., reselect) to derive computed data.
4. Use middleware you’ve created: To manage asynchronous flows, to log, or to handle side effects outside reducers.
5. Persist appropriately: Only persist the state slices you must to reduce storage burden, and you can further compact the data.

Example normalized state for users and posts:

{

  users: { byId: { 1: {id:1, name:'Ayaan'} }, allIds:[1] },

  posts: { byId: { 101: {id:101, userId:1, title:'Post'} }, allIds:[101] }

}

101. How do you handle complex data transformations in reducers?

• Keep reducers pure and deterministic.
• Use helper functions to wrap up complex transformations.
• Never mutate state; exploit the spread operator, use map, filter, or Immer.

Example:

const todosReducer = (state = [], action) => {

  switch(action.type) {

    case 'TOGGLE_COMPLETED':

      return state.map(todo =>

        todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo

      );

    default: return state;

  }

};

If it is complex, consider changing to use multiple smaller reducers or using createSlice with Immer to split some of the logic.

102. How do you handle error states in a Redux application?

• Keep an error slice or field in your state.  
• When the action fails, set the error messages in the state.
• When retrying, or upon a successful action, clear the errors.

Example with Thunk:

const initialState = { data: [], loading: false, error: null };

const dataReducer = (state = initialState, action) => {

  switch(action.type) {

    case 'FETCH_START': return { ...state, loading: true, error: null };

    case 'FETCH_SUCCESS': return { ...state, data: action.payload, loading: false };

    case 'FETCH_ERROR': return { ...state, loading: false, error: action.payload };

    default: return state;

  }

};

103. How do you manage errors in a production Redux application?

• Centralized error handling: An error slice that encompasses the whole app, or a middleware.
• Logging: Report errors occurring to a monitoring service, such as Sentry or LogRocket. 
• User feedback: Use UI components to display friendly error terms.
• Retry strategies: Let failed requests be retried via Thunk or Saga. 
• Prevent state corruption: Ensure when an error occurs, to always rollback to a safe state.

Example of error logging middleware:

const errorLogger = store => next => action => {

  if (action.type.endsWith('_ERROR')) {

    console.error('Redux Error:', action.payload);

  }

  return next(action);

};

Ideas like this enable more resilient, observable applications, with a better user experience.

104. How do you handle API request failures gracefully in Redux?

 To handle API failures gracefully you could:

1. Use state to maintain an error field, specifically tracking errors per slice,
2. Dispatch appropriate error actions when requests fail,
3. Update the UI to present the user with an understandable and meaningful message, try again option etc.,
4. If the application has relied on optimistic updates, rollback state in any way,

Example using Redux Thunk:

export const fetchTodos = () => async (dispatch) => {

  dispatch({ type: 'FETCH_TODOS_START' });

  try {

    const response = await fetch('/api/todos');

    const data = await response.json();

    dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: data });

  } catch (error) {

    dispatch({ type: 'FETCH_TODOS_ERROR', payload: error.message });

  }

};

Benefits:

• Prevents the application from crashing,
• Better user experience,
• Isolates the state when failures happen,
• Creates predictability to failures.

105. How do you structure API requests in Redux actions?

Some guiding principles for structuring API requests:

1. Use middleware (e.g. Thunk or Saga): to disconnect async logic from reducers.
2. Following a Request Flow: REQUEST_START → REQUEST_SUCCESS → REQUEST_ERROR.
3. Encapsulate endpoints: Using utility functions or service-styled packages to help address duplication in API calls.
4. Handle side effects separately: e.g., log, retries, notifications, etc.

Example:

export const fetchUser = (userId) => async (dispatch) => {

  dispatch({ type: 'FETCH_USER_START' });

  try {

    const user = await api.getUser(userId);

    dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });

  } catch (error) {

    dispatch({ type: 'FETCH_USER_ERROR', payload: error.message });

  }

};

106. Discuss methods for caching API responses in the Redux store

Caching response data can decrease API call counts and increase performance. Caching response methods include:

1. Persisting API response data in slices of state: Maintain a byId or entities object.
2. Time stamping data and invalidating: Record the time response was fetched and invalidate after the time is up.
3. Using selectors to memoize: Use reselect to memoize derived cached data.
4. Performing conditional fetching: Before dispatching an API request, verify that data exists.

Example:

const userSelector = (state, userId) => state.users.byId[userId];

if (!userSelector(store.getState(), userId)) {

  dispatch(fetchUser(userId)); // Fetch only if not cached

}

107. How does Redux interact with WebSockets or external data sources?

Redux has the ability to manage real-time data from dispatching actions on newly arriving data:

1. Open a WebSocket connection.
2. On receiving a message via that WebSocket, dispatch Redux actions with that data.
3. Reduce your state in your reducers to represent real-time incoming data.

Example:

const socket = new WebSocket('ws://example.com');

socket.onmessage = (event) => {

  const data = JSON.parse(event.data);

  store.dispatch({ type: 'RECEIVE_MESSAGE', payload: data });

};

Advantage:

• Having your Redux store always up to date real-time based off an external source.
• Components that are subscribed to the Redux store, will render the new data automatically.

108. How do you implement real-time updates in a Redux application?

1. WebSocket / Server-Sent Events (SSE): Get push updates from the server.
2. Dispatch actions on events: Every incoming message is used to dispatch an action to update state.
3. Use reducers to merge data: Update the state immutable.
4. Optional caching and throttling: So that we do not have one billion renders if the updates are coming in very frequently.

Example:

socket.onmessage = (event) => {

  const update = JSON.parse(event.data);

  store.dispatch({ type: 'UPDATE_TODO', payload: update });

};

Advantages:

• The user sees “real-time” data that does not require them to refresh.
• The state is centralized and all components can now rely on that state to be consistent.

109. How do you handle WebSockets and real-time updates in Redux?

To properly handle WebSockets in redux:

1. Open a WebSocket connection, either in a middleware or inside a service
2. On every message coming into the websocket, dispatch redux actions to update the store
3. From there, use reducers to merge or update the state in an immutable way
4. Window onbeforeunload to clean up when the component unmounts or the app is closed, and close the socket.

Example using middleware:

const websocketMiddleware = store => next => action => {

  if(action.type === 'CONNECT_SOCKET') {

    const socket = new WebSocket(action.payload.url);

    socket.onmessage = event => {

      store.dispatch({ type: 'RECEIVE_DATA', payload: JSON.parse(event.data) });

    };

  }

  return next(action);

};

Advantages:

• It provides real-time centralized state management.
• All components will re-render automatically without having to call the setState method on each component. The data will appear in each corresponding component automatically.

110. What is the role of redux-observable in handling asynchronous actions?

redux-observable is a middleware for Redux intended to use RxJS observables to manage asynchronous actions.

• It is coupled with an involved actions listener to provide the full range of access, including performing async operations (like API calls), and utilizing action dispatches.
• It is particularly useful for composing complex streams, debouncing, throttling, or cancelable actions.

Example:

import { ofType } from 'redux-observable';

import { map, mergeMap } from 'rxjs/operators';

import { ajax } from 'rxjs/ajax';

const fetchUserEpic = action$ => action$.pipe(

  ofType('FETCH_USER'),

  mergeMap(action =>

    ajax.getJSON(`/api/users/${action.payload}`).pipe(

      map(response => ({ type: 'FETCH_USER_SUCCESS', payload: response }))

    )

  )

);

111. Explain the purpose of the redux-observable library in Redux.

Purpose:

• To manage complex asynchronous flows using RxJS streams.
• To compose async actions (as an example, cancellation/retry/throttle/debounce).
• To leave async logic out of reducers, and keep state transformations pure.

Benefits:

• Declarative async flows.
• Compositional and testable.
• Best for real-time updates and a dependent async sequence that can happen simultaneously.

112. What are the benefits and trade-offs of using redux-saga over redux-thunk in complex applications?

Benefits of redux-saga:

• Handles complex async flows (for example, multiple dependent api calls and race conditions)
• Supports cancellation, debouncing, and throttling
• Introduces the usage of generator functions to enable cleaner, more readable, and seemingly synchronous async code
• More straightforward ability to test side effects that do not require interaction or dependencies to the redux store.

Trade-offs:

• Steeper learning curve using generators
• More boilerplate code to write if you have a smaller project
• It may become overkill for certain simple async actions.

When to use:

• Large scale applications that contain multiple complex side effects
• Applications that need a central location to manage and handle all side effects.

113. How do you manage complex side effects in a Redux application?

There are several strategies on how to manage complex side effects in your redux application:

1. Middleware: Use redux-thunk, redux-saga, or redux-observable to handle the async operations outside of your reducers.
2. Organize and isolate the project logic: Extract the API calls, WebSocket handles, and other side effects into their own respective module.
3. Canceling operations: use sagas (takeLatest) or observables (switchMap) to avoid race conditions in the first place
4. Error handling: make sure to catch errors in your middleware and dispatch (or redirect) the corresponding error action as needed.
5. Testing: when testing your app, you can strictly test your side effects (and other backend relationship tests) without the expectation for it to work, independent of the redux store or any dependencies in your code.

Example with redux-saga for dependent API calls:

function* fetchUserAndPosts(action) {

  try {

    const user = yield call(api.fetchUser, action.payload.userId);

    const posts = yield call(api.fetchPosts, user.id);

    yield put({ type: 'FETCH_SUCCESS', payload: { user, posts } });

  } catch (error) {

    yield put({ type: 'FETCH_ERROR', payload: error.message });

  }

}

Benefit:

• The additional benefit for this approach is that you are wrangling all of the complex side effects into centralized locations and thus maintain the purity of your reducers while passing useful state data around your app.

114. How do you enforce type safety when working with Redux in a TypeScript project?

When you use TypeScript with Redux you benefit from compile-time type safety and reduced risk of runtime error. The most important things to do:

1. Type your state: Your slice of state should have an interface
2. Type your actions: Make sure to use TypeScript’s type or an enum for action types
3. Typed reducers: Make sure to type the params and return type of your reducers
4. Typed dispatch and selectors: Use TypedUseSelectorHook and AppDispatch.

Example:

interface Todo { id: number; text: string; completed: boolean; }

interface TodoState { todos: Todo[]; }

const ADD_TODO = 'ADD_TODO' as const;

interface AddTodoAction { type: typeof ADD_TODO; payload: Todo; }

type TodoActions = AddTodoAction;

const todoReducer = (state: TodoState, action: TodoActions): TodoState => {

  switch(action.type) {

    case ADD_TODO: return { todos: [...state.todos, action.payload] };

    default: return state;

  }

};

Benefits:

• Avoids typos in action types.
• Enforces consistent state shapes.
• Improves developer productivity with IntelliSense.

115. How do you implement a feature toggle mechanism using Redux?

Feature toggles can be a useful mechanism for enabling/disabling features at runtime:

1. Store feature flags in a slice of Redux state.
2. Dispatch actions to change flags.
3. Render components conditionally based on the flags.

Example:

const initialState = { newUIEnabled: false };

const featureReducer = (state = initialState, action) => {

  switch(action.type) {

    case 'TOGGLE_FEATURE': 

      return { ...state, [action.payload.feature]: action.payload.value };

    default: return state;

  }

};

// Usage in component

const isEnabled = useSelector(state => state.features.newUIEnabled);

return isEnabled ? <NewUI /> : <OldUI />;

Benefits:

• Enables gradual rollouts and A/B testing
• Flags are all managed centrally.

116. How do you handle internationalization (i18n) state management with Redux?

Redux manages internationalization as follows:

1. Store current language and (optionally) translation information in state.
2. Dispatch actions that update language.
3. Component(s) subscribe to language (and other) states that will then correctly render content.

Example:

const initialState = { language: 'en' };

const i18nReducer = (state = initialState, action) => {

  switch(action.type) {

    case 'SET_LANGUAGE': return { ...state, language: action.payload };

    default: return state;

  }

};

// Change language

dispatch({ type: 'SET_LANGUAGE', payload: 'fr' });

Tips:

• Use some libraries like react-intl and i18next along with Redux for larger apps.
• Keep translation files outside of Redux so it does not bloat the store.

117. How do you use Redux in combination with libraries like React Router for efficient state management?

Redux can supplement React Router.

1. Maintain navigation state – you may store current route or query params, etc.
2. To sync Redux with Router, can use a library like connected-react-router.
3. Use middleware to trigger side effects from navigation, e.g. on login, redirect.

Example with connected-react-router:

import { connectRouter, routerMiddleware } from 'connected-react-router';

import { createBrowserHistory } from 'history';

import { configureStore } from '@reduxjs/toolkit';

export const history = createBrowserHistory();

const store = configureStore({

  reducer: connectRouter(history)(rootReducer),

  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(routerMiddleware(history))

});

Benefits:

• State and routing logic are unified.
• Can control navigation with Redux action dispatches.

118. What do you believe is the future of Redux given the context of emerging state management libraries?

Redux remains relevant due to its:

• Predictable state management and time travel debug capabilities. 
• Massive ecosystem, middleware, and developer tools. 
• TypeScript support for large-scale applications.

Emerging trends:

• Easier state management libraries, like Recoil, Zustand, and Jotai, are gaining traction for removing boilerplate and accessing state directly. 
• Redux Toolkit has allowed developers to write less boilerplate code along with async handling as other state management solutions, which reduces competitive advantage.

Conclusion 

Redux is an essential skill for any React developer as it allows you to manage your application state in a predictable, centralized manner. Becoming skilled with Redux will allow you to plan and build scalable and maintainable applications while providing you with extra leverage to win technical interviews for frontend and full-stack roles. 

In this guide, we have discussed 100+ Redux interview questions that span the levels of difficulty from beginner, intermediate, and advanced, as well as practical examples, code snippets, and thorough explanations. By adequately covering topics through all three levels around Redux, actions, reducers, middleware, async, normalizing your state, and performance tweaks, you should feel comfortable answering Redux-related questions and be able to implement it in your real-life projects.

Useful Resources:

• React Interview Questions
• JavaScript Interview Questions
• Front-End Developer Interview Questions
• Full Stack Developer Interview Questions
• UI Developer Interview Questions

Redux Interview Questions – FAQs