React Redux Interview Questions & Answers 2026

📖 Introduction

This comprehensive guide focuses on React Redux interview questions covering Redux state management. Whether you're preparing for your first React.js interview or looking to refresh your knowledge, this resource provides detailed answers with code examples to help you succeed.

What you'll learn:

• Redux Store: Understanding the Redux store architecture
• Actions & Reducers: Managing state changes
• Middleware: Using Redux middleware for async operations
• Redux Toolkit: Modern Redux development with RTK
• React-Redux: Connecting React components to Redux
• Best Practices: Redux patterns and optimization techniques

Perfect for:

• Developers preparing for React.js interviews focusing on Redux
• Frontend engineers looking to master Redux state management
• Teams conducting React technical assessments
• Anyone learning Redux and seeking comprehensive interview preparation

Keywords: React Redux interview questions, React JS interview questions, React.js interview questions, interview questions on react js Key Features:

• 31+ React Redux interview questions with detailed explanations
• Code examples for every concept
• Updated for 2026 with latest React features
• Covers all difficulty levels from beginner to advanced
• Practical answers you can use in real interviews

React Redux

⬆ Back to Top

1. What is Redux?

   Redux is a predictable state container for JavaScript applications, most commonly used with React. It helps you manage and centralize your application’s state in a single source of truth, enabling easier debugging, testing, and maintenance—especially in large or complex applications. Redux core is tiny library(about 2.5kB gzipped) and has no dependencies.

⬆ Back to Top

2. What are the core principles of Redux?

   Redux follows three fundamental principles:

   1. Single source of truth: The state of your whole application is stored in an object tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.

   const store = createStore(reducer)
   

   2. State is read-only: The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state.

   const action = { type: "INCREMENT" }
   store.dispatch(action)
   

   3. Changes are made with pure functions(Reducers): To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters, and return the next state.

   function counter(state = 0, action) {
     switch (action.type) {
       case "INCREMENT":
         return state + 1
       case "DECREMENT":
         return state - 1
       default:
         return state
     }
   }
   

⬆ Back to Top

3. What are the downsides of Redux?

   While Redux offers a powerful and predictable state management solution, it comes with a few trade-offs when compared to Flux. These include:

   1. Immutability is essential Redux enforces a strict immutability model for state updates, which differs from Flux’s more relaxed approach. This means you must avoid mutating state directly. Many Redux-related libraries assume immutability, so your team must be disciplined in writing pure update logic. You can use tools like redux-immutable-state-invariant, Immer, or Immutable.js to help enforce this practice, especially during development.
   2. Careful selection of complementary packages Redux is more minimal by design and provides extension points such as middleware and store enhancers. This has led to a large ecosystem, but it also means you must thoughtfully choose and configure additional packages for features like undo/redo, persistence, or form handling—something Flux explicitly leaves out but may be simpler to manage in smaller setups.
   3. Limited static type integration While Flux has mature support for static type checking with tools like Flow, Redux’s type integration is less seamless. Although TypeScript is commonly used with Redux now, early Flow support was limited, and more boilerplate was required for static type safety. This may affect teams that rely heavily on type systems for large codebases.

⬆ Back to Top

4. What is the difference between mapStateToProps() and mapDispatchToProps()?

   mapStateToProps() is a utility which helps your component get updated state (which is updated by some other components):

   const mapStateToProps = (state) => {
     return {
       todos: getVisibleTodos(state.todos, state.visibilityFilter),
     }
   }
   

   mapDispatchToProps() is a utility which will help your component to fire an action event (dispatching action which may cause change of application state):

   const mapDispatchToProps = (dispatch) => {
     return {
       onTodoClick: (id) => {
         dispatch(toggleTodo(id))
       },
     }
   }
   

   It is recommended to always use the “object shorthand” form for the mapDispatchToProps.

   Redux wraps it in another function that looks like (…args) => dispatch(onTodoClick(…args)), and pass that wrapper function as a prop to your component.

   const mapDispatchToProps = {
     onTodoClick,
   }
   

⬆ Back to Top

5. Can I dispatch an action in reducer?

   Dispatching an action within a reducer is an anti-pattern. Your reducer should be without side effects, simply digesting the action payload and returning a new state object. Adding listeners and dispatching actions within the reducer can lead to chained actions and other side effects.

⬆ Back to Top

6. How to access Redux store outside a component?

   You just need to export the store from the module where it created with createStore(). Also, it shouldn't pollute the global window object.

   store = createStore(myReducer)
   
   export default store
   

⬆ Back to Top

7. What are the drawbacks of MVW pattern?

   1. DOM manipulation is very expensive which causes applications to behave slow and inefficient.
   2. Due to circular dependencies, a complicated model was created around models and views.
   3. Lot of data changes happens for collaborative applications(like Google Docs).
   4. No way to do undo (travel back in time) easily without adding so much extra code.

⬆ Back to Top

8. Are there any similarities between Redux and RxJS?

   These libraries are very different for very different purposes, but there are some vague similarities.

   Redux is a tool for managing state throughout the application. It is usually used as an architecture for UIs. Think of it as an alternative to (half of) Angular. RxJS is a reactive programming library. It is usually used as a tool to accomplish asynchronous tasks in JavaScript. Think of it as an alternative to Promises. Redux uses the Reactive paradigm because the Store is reactive. The Store observes actions from a distance, and changes itself. RxJS also uses the Reactive paradigm, but instead of being an architecture, it gives you basic building blocks, Observables, to accomplish this pattern.

⬆ Back to Top

9. How to reset state in Redux?

   You need to write a root reducer in your application which delegate handling the action to the reducer generated by combineReducers().

   For example, let us take rootReducer() to return the initial state after USER_LOGOUT action. As we know, reducers are supposed to return the initial state when they are called with undefined as the first argument, no matter the action.

   const appReducer = combineReducers({
     /* your app's top-level reducers */
   })
   
   const rootReducer = (state, action) => {
     if (action.type === "USER_LOGOUT") {
       state = undefined
     }
   
     return appReducer(state, action)
   }
   

   In case of using redux-persist, you may also need to clean your storage. redux-persist keeps a copy of your state in a storage engine. First, you need to import the appropriate storage engine and then, to parse the state before setting it to undefined and clean each storage state key.

   const appReducer = combineReducers({
     /* your app's top-level reducers */
   })
   
   const rootReducer = (state, action) => {
     if (action.type === "USER_LOGOUT") {
       Object.keys(state).forEach((key) => {
         storage.removeItem(`persist:${key}`)
       })
   
       state = undefined
     }
   
     return appReducer(state, action)
   }
   

⬆ Back to Top

10. What is the difference between React context and React Redux?

    You can use Context in your application directly and is going to be great for passing down data to deeply nested components which what it was designed for.

    Whereas Redux is much more powerful and provides a large number of features that the Context API doesn't provide. Also, React Redux uses context internally but it doesn't expose this fact in the public API.

⬆ Back to Top

11. Why are Redux state functions called reducers?

    Reducers always return the accumulation of the state (based on all previous and current actions). Therefore, they act as a reducer of state. Each time a Redux reducer is called, the state and action are passed as parameters. This state is then reduced (or accumulated) based on the action, and then the next state is returned. You could reduce a collection of actions and an initial state (of the store) on which to perform these actions to get the resulting final state.

⬆ Back to Top

12. How to make AJAX request in Redux?

    You can use redux-thunk middleware which allows you to define async actions.

    Let's take an example of fetching specific account as an AJAX call using fetch API:

    export function fetchAccount(id) {
      return (dispatch) => {
        dispatch(setLoadingAccountState()) // Show a loading spinner
        fetch(`/account/${id}`, (response) => {
          dispatch(doneFetchingAccount()) // Hide loading spinner
          if (response.status === 200) {
            dispatch(setAccount(response.json)) // Use a normal function to set the received state
          } else {
            dispatch(someError)
          }
        })
      }
    }
    
    function setAccount(data) {
      return { type: "SET_Account", data: data }
    }
    

⬆ Back to Top

13. Should I keep all component's state in Redux store?

    Keep your data in the Redux store, and the UI related state internally in the component.

⬆ Back to Top

14. What is the proper way to access Redux store?

    The best way to access your store in a component is to use the connect() function, that creates a new component that wraps around your existing one. This pattern is called Higher-Order Components, and is generally the preferred way of extending a component's functionality in React. This allows you to map state and action creators to your component, and have them passed in automatically as your store updates.

    Let's take an example of <FilterLink> component using connect:

    import { connect } from "react-redux"
    import { setVisibilityFilter } from "../actions"
    import Link from "../components/Link"
    
    const mapStateToProps = (state, ownProps) => ({
      active: ownProps.filter === state.visibilityFilter,
    })
    
    const mapDispatchToProps = (dispatch, ownProps) => ({
      onClick: () => dispatch(setVisibilityFilter(ownProps.filter)),
    })
    
    const FilterLink = connect(mapStateToProps, mapDispatchToProps)(Link)
    
    export default FilterLink
    

    Due to it having quite a few performance optimizations and generally being less likely to cause bugs, the Redux developers almost always recommend using connect() over accessing the store directly (using context API).

    function MyComponent {
      someMethod() {
        doSomethingWith(this.context.store);
      }
    }
    

⬆ Back to Top

15. What is the difference between component and container in React Redux?

    Component is a class or function component that describes the presentational part of your application.

    Container is an informal term for a component that is connected to a Redux store. Containers subscribe to Redux state updates and dispatch actions, and they usually don't render DOM elements; they delegate rendering to presentational child components.

⬆ Back to Top

16. What is the purpose of the constants in Redux?

    Constants allows you to easily find all usages of that specific functionality across the project when you use an IDE. It also prevents you from introducing silly bugs caused by typos – in which case, you will get a ReferenceError immediately.

    Normally we will save them in a single file (constants.js or actionTypes.js).

    export const ADD_TODO = "ADD_TODO"
    export const DELETE_TODO = "DELETE_TODO"
    export const EDIT_TODO = "EDIT_TODO"
    export const COMPLETE_TODO = "COMPLETE_TODO"
    export const COMPLETE_ALL = "COMPLETE_ALL"
    export const CLEAR_COMPLETED = "CLEAR_COMPLETED"
    

    In Redux, you use them in two places:

    1. During action creation:

       Let's take actions.js:

       import { ADD_TODO } from "./actionTypes"
       
       export function addTodo(text) {
         return { type: ADD_TODO, text }
       }
       

    2. In reducers:

       Let's create reducer.js:

       import { ADD_TODO } from "./actionTypes"
       
       export default (state = [], action) => {
         switch (action.type) {
           case ADD_TODO:
             return [
               ...state,
               {
                 text: action.text,
                 completed: false,
               },
             ]
           default:
             return state
         }
       }
       

⬆ Back to Top

17. What are the different ways to write mapDispatchToProps()?

    There are a few ways of binding action creators to dispatch() in mapDispatchToProps().

    Below are the possible options:

    const mapDispatchToProps = (dispatch) => ({
      action: () => dispatch(action()),
    })
    

    const mapDispatchToProps = (dispatch) => ({
      action: bindActionCreators(action, dispatch),
    })
    

    const mapDispatchToProps = { action }
    

    The third option is just a shorthand for the first one.

⬆ Back to Top

18. What is the use of the ownProps parameter in mapStateToProps() and mapDispatchToProps()?

    If the ownProps parameter is specified, React Redux will pass the props that were passed to the component into your connect functions. So, if you use a connected component:

    import ConnectedComponent from "./containers/ConnectedComponent"
    
    ;<ConnectedComponent user={"john"} />
    

    The ownProps inside your mapStateToProps() and mapDispatchToProps() functions will be an object:

    {
      user: "john"
    }
    

    You can use this object to decide what to return from those functions.

⬆ Back to Top

19. How to structure Redux top level directories?

    Most of the applications has several top-level directories as below:

    1. Components: Used for dumb components unaware of Redux.
    2. Containers: Used for smart components connected to Redux.
    3. Actions: Used for all action creators, where file names correspond to part of the app.
    4. Reducers: Used for all reducers, where files name correspond to state key.
    5. Store: Used for store initialization.

    This structure works well for small and medium size apps.

⬆ Back to Top

20. What is redux-saga?

    redux-saga is a library that aims to make side effects (asynchronous things like data fetching and impure things like accessing the browser cache) in React/Redux applications easier and better.

    It is available in NPM:

    $ npm install --save redux-saga
    

⬆ Back to Top

21. What is the mental model of redux-saga?

    Saga is like a separate thread in your application, that's solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal Redux actions, it has access to the full Redux application state and it can dispatch Redux actions as well.

⬆ Back to Top

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

    Both call() and put() are effect creator functions. call() function is used to create effect description, which instructs middleware to call the promise. put() function creates an effect, which instructs middleware to dispatch an action to the store.

    Let's take example of how these effects work for fetching particular user data.

    function* fetchUserSaga(action) {
      // `call` function accepts rest arguments, which will be passed to `api.fetchUser` function.
      // Instructing middleware to call promise, it resolved value will be assigned to `userData` variable
      const userData = yield call(api.fetchUser, action.userId)
    
      // Instructing middleware to dispatch corresponding action.
      yield put({
        type: "FETCH_USER_SUCCESS",
        userData,
      })
    }
    

⬆ Back to Top

23. What is Redux Thunk?

    Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch() and getState() as parameters.

⬆ Back to Top

24. What are the differences between redux-saga and redux-thunk?

    Both Redux Thunk and Redux Saga take care of dealing with side effects. In most of the scenarios, Thunk uses Promises to deal with them, whereas Saga uses Generators. Thunk is simple to use and Promises are familiar to many developers, Sagas/Generators are more powerful but you will need to learn them. But both middleware can coexist, so you can start with Thunks and introduce Sagas when/if you need them.

⬆ Back to Top

25. What is Redux DevTools?

    Redux DevTools is a live-editing time travel environment for Redux with hot reloading, action replay, and customizable UI. If you don't want to bother with installing Redux DevTools and integrating it into your project, consider using Redux DevTools Extension for Chrome and Firefox.

⬆ Back to Top

26. What are the features of Redux DevTools?

    Some of the main features of Redux DevTools are below,

    1. Lets you inspect every state and action payload.
    2. Lets you go back in time by cancelling actions.
    3. If you change the reducer code, each staged action will be re-evaluated.
    4. If the reducers throw, you will see during which action this happened, and what the error was.
    5. With persistState() store enhancer, you can persist debug sessions across page reloads.

⬆ Back to Top

27. What are Redux selectors and why use them?

    Selectors are functions that take Redux state as an argument and return some data to pass to the component.

    For example, to get user details from the state:

    const getUserData = (state) => state.user.data
    

    These selectors have two main benefits,

    1. The selector can compute derived data, allowing Redux to store the minimal possible state
    2. The selector is not recomputed unless one of its arguments changes

⬆ Back to Top

28. What is Redux Form?

    Redux Form works with React and Redux to enable a form in React to use Redux to store all of its state. Redux Form can be used with raw HTML5 inputs, but it also works very well with common UI frameworks like Material UI, React Widgets and React Bootstrap.

⬆ Back to Top

29. What are the main features of Redux Form?

    Some of the main features of Redux Form are:

    1. Field values persistence via Redux store.
    2. Validation (sync/async) and submission.
    3. Formatting, parsing and normalization of field values.

⬆ Back to Top

30. How to add multiple middlewares to Redux?

    You can use applyMiddleware().

    For example, you can add redux-thunk and logger passing them as arguments to applyMiddleware():

    import { createStore, applyMiddleware } from "redux"
    const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore)
    

⬆ Back to Top

31. How to set initial state in Redux?

    You need to pass initial state as second argument to createStore:

    const rootReducer = combineReducers({
      todos: todos,
      visibilityFilter: visibilityFilter,
    })
    
    const initialState = {
      todos: [{ id: 123, name: "example", completed: false }],
    }
    
    const store = createStore(rootReducer, initialState)
    

⬆ Back to Top

📚 Related React Interview Questions

Continue your React JS interview questions preparation with these related topics:

134. (#table-of-contents)**