Question 1

What is Redux and what are its three core principles?

Accepted Answer

Redux is a pattern and library for managing global application state. Its three core principles are:
1. Single source of truth: The global state of your application is stored in an object tree within a single store.
2. State is read-only: The only way to change the state is to emit an action, an object describing what happened.
3. Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers.

Question 2

Explain Actions, Reducers, and the Store in Redux.

Accepted Answer

- Actions are plain JavaScript objects that have a `type` field, representing payloads of information sent from the application to the store.
- Reducers are pure functions that take the current state and an action as arguments, and return a new state.
- The Store is the object that holds the state tree, allows reading state, and dispatches actions.

Question 3

What is Redux Toolkit (RTK) and why is it preferred over legacy Redux?

Accepted Answer

Redux Toolkit (RTK) is the official, opinionated, standard toolset for efficient Redux development. It is preferred because it simplifies configurations, eliminates boilerplates (like action creators and constants), handles immutability automatically using the Immer library, and includes essential middlewares (like Redux Thunk) by default.

Question 4

What is a slice in Redux Toolkit?

Accepted Answer

A slice is a collection of Redux reducer logic and actions for a single feature of your app, created using `createSlice`. You specify a name, initial state, and reducer functions. Redux Toolkit automatically generates action creators and action types matching your reducers.

Question 5

Explain how useSelector and useDispatch hooks connect React components.

Accepted Answer

- `useSelector` extracts data from the Redux store state using a selector function, automatically subscribing the component to store updates.
- `useDispatch` returns a reference to the dispatch function from the Redux store, letting you dispatch actions in response to user events.

Question 6

What is middleware in Redux?

Accepted Answer

Redux middleware provides a third-party extension point between dispatching an action and the moment it reaches the reducer. It is used for logging, crash reporting, performing asynchronous tasks (like fetching data), and routing.

Question 7

What is the role of Redux Thunk?

Accepted Answer

Redux Thunk is the default middleware in Redux Toolkit. It allows you to write action creators that return a function instead of an action object. This inner function receives the dispatch and getState methods, allowing you to perform asynchronous side-effects (like fetch calls) and dispatch actions once resolved.

Question 8

Explain why reducers must be pure functions.

Accepted Answer

Reducers must be pure functions to ensure predictable state updates. Pure functions return the exact same output for the same input and have no side effects. If a reducer mutated state directly, Redux could not detect changes or support time-travel debugging.

Question 9

What is the Immer library and how does Redux Toolkit use it?

Accepted Answer

Immer is a library that simplifies writing immutable state updates. It allows you to write code that mutates state directly (e.g. `state.user.name = 'John'`). Under the hood, Immer intercepts updates using Proxies and compiles them into safe, immutable copies, preventing state mutation bugs.

Question 10

What is the difference between local state and global state?

Accepted Answer

Local state (useState) is managed entirely within a single component and is discarded when the component unmounts. Global state (Redux) exists outside the component tree, persisting across page navigations and accessible to any component in the application.

Question 11

How does the Provider component work in React Redux?

Accepted Answer

The `<Provider>` component wraps the React component tree and passes the Redux store down using React Context. This makes the store instance accessible to hooks like `useSelector` and `useDispatch` nested deep in the application.

Question 12

What is an action creator in Redux?

Accepted Answer

An action creator is a function that creates and returns an action object: `const add = (id) => ({ type: 'ADD', payload: id })`. In Redux Toolkit, actions are generated automatically by `createSlice`, removing the need to write them manually.

Question 13

Explain payload in Redux actions.

Accepted Answer

The `payload` is an optional property in a Redux action object that holds the actual data or variables needed to update the state (e.g. user records, item indices). Redux Toolkit places arguments sent to action triggers inside `action.payload`.

Question 14

What is Redux DevTools Extension?

Accepted Answer

Redux DevTools is a developer tool that lets you inspect dispatched actions, state mutations, and perform time-travel debugging (rewinding or fast-forwarding actions to see state changes in real-time).

Question 15

How do you combine multiple reducers in legacy Redux?

Accepted Answer

In legacy Redux, you combine multiple slices of state using `combineReducers`. Redux Toolkit handles this automatically inside `configureStore` under the `reducer` configuration object.

Question 16

What is the purpose of configureStore in Redux Toolkit?

Accepted Answer

`configureStore` is the standard store setup function. It automatically combines reducers, adds default middlewares (like Thunk), activates Redux DevTools, and checks for common mutation mistakes in development.

Question 17

Explain state immutability in Redux.

Accepted Answer

State immutability means that you never change the state tree directly. If an update occurs, you return a new object with the updated properties. This allows Redux to compare object references quickly and determine if components need to re-render.

Question 18

What is RTK Query and how does it optimize data fetching in React apps?

Accepted Answer

RTK Query is an advanced data fetching and caching tool built on Redux Toolkit. It simplifies API logic by auto-generating React hooks for queries and mutations. It optimizes performance by caching fetched data, automatically de-duplicating concurrent requests, polling backend endpoints, and managing loading, error, and caching state flags automatically.

Question 19

How do you optimize useSelector hooks to prevent unnecessary re-renders?

Accepted Answer

`useSelector` performs a strict reference check on its return value. If you return a new array or object (e.g. `state.items.filter(...)`), the selector thinks the state has changed on every render, forcing the component to re-render. To optimize, use memoized selectors built with `createSelector`, which return cached references if inputs remain identical.

Question 20

Explain how to write custom middleware in Redux.

Accepted Answer

Redux middleware uses a curried signature: `const middleware = store => next => action => { ... }`. The outer function receives the store context, the middle function receives the next middleware in the chain, and the inner function intercepts actions, letting you run logs, inject parameters, or halt dispatches.

Question 21

How do you test Redux slices and async thunks?

Accepted Answer

Slices are tested by executing reducer functions with mock states and actions, asserting that the returned state matches updates. Async thunks are tested by mocking API calls (e.g. using Jest mocks or MSW), dispatching the thunk, and verifying that the dispatched actions match expected `pending`, `fulfilled`, or `rejected` sequences.

Question 22

What is normalisation in Redux state design?

Accepted Answer

Normalisation involves structuring state to avoid nested structures. Relational records are stored as flat objects indexed by IDs (e.g. `byIds` map), and a list of IDs (e.g. `allIds` array) tracks ordering. This prevents deep updates and simplifies state merging.

Question 23

Explain the role of createAsyncThunk in Redux Toolkit.

Accepted Answer

`createAsyncThunk` compiles asynchronous operations into a standard Redux action cycle. It accepts an action type string and a creator payload callback, automatically generating thunks that dispatch `pending`, `fulfilled`, and `rejected` actions based on promise outcomes.

Question 24

How does Redux handle action batching in React?

Accepted Answer

React Redux automatically batches multiple rapid state dispatch actions. This merges subsequent updates, triggering only a single React re-render cycle to protect performance.

Question 25

What is createEntityAdapter and what problem does it solve?

Accepted Answer

`createEntityAdapter` is a utility in Redux Toolkit that manages normalised state objects. It automatically generates reducers and selectors for CRUD operations (like `addOne`, `updateOne`, `removeOne`), reducing normalized state boilerplate.

Question 26

Explain how to write unit tests for Redux selectors.

Accepted Answer

Since selectors are pure functions that accept state, you test them by passing a mock state object to the selector and asserting that the returned slice of data or derived calculation is correct.

Question 27

What is Redux Persist and when is it configured?

Accepted Answer

`redux-persist` is a library that automatically saves the Redux store to storage (like `localStorage` or `sessionStorage`) and re-hydrates the state on app launch, preserving sessions across page refreshes.

Question 28

Explain the purpose of middleware serializability checks in RTK.

Accepted Answer

Redux Toolkit includes checks to warn if non-serializable values (like classes, functions, or promises) are dispatched as actions or stored in state, ensuring that the state remains serializable for logging and persistence.

Question 29

How do you manage race conditions in Redux async actions?

Accepted Answer

In legacy Redux, you check current request state flags before fetching. In RTK Query, race conditions are managed automatically by aborting previous unresolved requests if a new request is triggered with the same parameters.

Question 30

What is the difference between Redux Thunk and Redux Saga?

Accepted Answer

Redux Thunk uses simple async functions that dispatch actions once resolved. Redux Saga is a more complex middleware using generator functions and effects, which is powerful for handling complex, parallel asynchronous flows.

Question 31

How do you write custom selectors with createSelector?

Accepted Answer

Import `createSelector` from RTK. It accepts input selectors and a transform function. The selector memoizes results, recalculating only if the values extracted by the input selectors change.

Question 32

How do you clear global state upon user logout?

Accepted Answer

Define a root reducer wrapper. When a logout action is intercepted, pass `undefined` as the state argument to the child reducers, causing Redux to reset the entire state tree to their initial states.

Question 33

What is the difference between RTK Query mutations and queries?

Accepted Answer

Queries are used for reading data from the server. They cache results and manage subscriptions. Mutations are used for sending updates to the server, invalidating cached tags to trigger re-fetches.

Question 34

How do you mock a Redux store during component testing?

Accepted Answer

Wrap the component under test in React Redux's `<Provider>` component, passing a mock store instance created with `configureStore` containing mock reducer states to isolate tests.

Question 35

How would you design a scalable global state architecture for an enterprise-level SaaS application?

Accepted Answer

A scalable enterprise global state architecture must split UI state, cached server data, and persistent user settings:
1. Separate UI and Server State: Use RTK Query to manage server-side data, caching, and background synchronization, keeping it out of client slices.
2. Slice Modularity: Organize state by features (e.g. features/billing, features/teams) rather than horizontal layers. Slices should be lazily loaded alongside code-split routes.
3. Entity Normalization: Use `createEntityAdapter` to store collections in flat key-value formats, preventing deep nesting updates.
4. Strict Encapsulation: Access state exclusively via memoized selectors, preventing components from coupling to store shape implementations.

Question 36

Explain RTK Query Cache Invalidation and Optimistic Updates at scale.

Accepted Answer

RTK Query manages caching using a 'tags' system. Endpoints define tags they provide (queries) or invalidate (mutations). When a mutation runs, it invalidates matching tags, causing subscribing components to re-fetch.

Optimistic Updates provide immediate UI updates during queries by predicting success. In `onQueryStarted`, dispatch updates to the local cache immediately. If the server request succeeds, the cache remains. If the server request fails, dispatch rollback actions in the catch block to restore states.

Question 37

How do you debug memory leaks in Redux stores caused by stale subscriptions?

Accepted Answer

Redux stores persist in memory. If components register event listeners inside middleware or subscribe to selectors and do not unmount, they remain retained. Profile these by taking Heap Snapshots in Chrome DevTools during navigation cycles and checking for retained wrapper instances.

Question 38

How would you implement modular Redux store loading for micro-frontends?

Accepted Answer

In micro-frontend architectures, a central shell app handles store initialization. Remote apps inject their local reducers dynamically at runtime using `store.replaceReducer()`. This combines local slices into the global state tree on the fly without rebuilds.

Question 39

Explain how to handle offline state synchronization in Redux applications.

Accepted Answer

Intercept network errors in middleware. Queue failed mutation actions in an offline array inside the store, and save this queue to LocalStorage. Once connection recovers (using `window.addEventListener('online')`), dispatch the queued mutations in order.

Question 40

How do you write custom middleware to handle real-time WebSockets integration?

Accepted Answer

Create a middleware closure that holds a reference to a WebSocket instance. The middleware intercepts actions like `WS_CONNECT` to open connections, listens to socket events to dispatch data actions, and sends payloads on actions like `WS_SEND`.

Question 41

What is structural sharing in Redux and how does it optimize React rendering?

Accepted Answer

Redux Toolkit uses structural sharing during updates. If a slice of state is updated, Redux only copies the path of objects that changed. The unmodified branches retain their exact memory references, preventing subscribing components from re-rendering.

Question 42

How do you set up distributed telemetry logging for Redux actions?

Accepted Answer

Configure a custom middleware that filters actions (e.g. looking for mutations or errors). Log trace contexts, duration times, and error codes, and batch these logs before sending them to observability tools like Datadog.

Question 43

Explain the architecture of RTK Query request de-duplication.

Accepted Answer

When multiple components render simultaneously and subscribe to the same query, RTK Query matches their cache key. It executes only a single request, resolves it, and shares the result with all subscribers.

Question 44

How do you design custom adapters inside createEntityAdapter?

Accepted Answer

Entity Adapter maintains two collections: an array of sorted IDs and a dictionary of entities. You customize lookups by defining `selectId` to specify the primary key, and `sortComparer` to maintain sorted sequences.

Question 45

How do you prevent UI freezing when sorting massive store lists?

Accepted Answer

Sorting lists of tens of thousands of items in selectors blocks rendering. Optimize by performing sorting operations inside Web Workers, or caching sorted arrays inside entity adapter states to avoid on-the-fly sorts.

Question 46

How do you configure dynamic slice loading in Next.js SSR apps using Redux?

Accepted Answer

In Next.js, initialize a new Redux store on every SSR request using a wrapper wrapper function. Hydrate the store state with pre-fetched API payloads during server rendering, and compile actions on the client.

Question 47

How do you audit state mutation leaks using customized middleware?

Accepted Answer

In development, RTK injects middleware that deep-freezes states. If any component attempts to mutate state directly, V8 throws immediate runtime exceptions. Disable this check in production to avoid performance overheads.

Question 48

Explain the difference between RTK Query custom base queries and standard fetch.

Accepted Answer

`fetchBaseQuery` is a wrapper around `fetch`. Custom base queries allow you to configure custom client settings, inject auth tokens dynamically from stores, auto-retry on 500 errors, and intercept response headers.

Question 49

How do you handle multi-tab state synchronization in Redux?

Accepted Answer

Use a custom middleware that listens for updates. Sync updates across tabs using `BroadcastChannel` or storage event listeners, dispatching sync actions to update stores on other active tabs in real-time.

Question 50

How do you prevent memory exhaustion caused by infinite API caches?

Accepted Answer

Configure cache retention lifetimes (`keepUnusedDataFor` property in RTK Query). This setting automatically cleans up cached entries that have no active component subscriptions, freeing up system memory.

Question 51

How do you mock RTK Query endpoints during component testing?

Accepted Answer

Use Mock Service Worker (MSW) to mock HTTP endpoints. In tests, render components wrapped in standard Redux providers, dispatching queries to let MSW return mocked payloads.

Top 51 Redux Interview Questions and Answers (2026)

What is Redux and Why is it Critical in Modern Engineering?

Redux Lifecycle Visualizer

Core Architectural Concepts in Redux

Single Source of Truth

Immutable State Updates

Reducers & Action Creators

Middleware (Thunk, Saga)

RTK Query Data Fetching

check_circleWhy Modern Companies Choose Redux

lightbulbStrategic Preparation Tips

errorCrucial Mistakes to Avoid

trending_upHiring Trends & Career Outlook (2026)

Basics