Redux interview questions

What a strong answer covers

• Explain 'Single source of truth': the entire application state is stored in a single object tree within one store.
• Describe 'State is read-only': the only way to change the state is to emit an action, an object describing what happened.
• Detail 'Changes are made with pure functions': reducers take the previous state and an action, and return the next state without mutating the original state.

Where people lose the point

• ×Missing one of the three principles or misstating its meaning.
• ×Not emphasizing immutability when discussing how state changes are made.

What a strong answer covers

• Start with a UI interaction or event triggering an action.
• Describe how the action is dispatched to the Redux store.
• Explain that middleware (if present) processes the action before it reaches the reducers.
• Detail how reducers process the action and current state to produce a new state.
• Conclude with the store updating its state and notifying subscribed UI components to re-render.

Where people lose the point

• ×Confusing the order of components in the data flow (e.g., reducer before action dispatch).
• ×Omitting the role of middleware or incorrectly placing it in the flow.

What a strong answer covers

• Define an action as a plain JavaScript object that describes what happened.
• State that actions must have a `type` property, typically a string constant.
• Mention that actions can optionally include a `payload` property for any relevant data.
• Explain the use of action creators as functions that return action objects to ensure consistency.

Where people lose the point

• ×Thinking actions perform logic or side effects themselves.
• ×Forgetting to mention the mandatory `type` property of an action.

What a strong answer covers

• Define a reducer as a pure function that takes the current state and an action, and returns a new state.
• Explain that reducers must not mutate the original state object directly.
• Detail the characteristics of a pure function: given the same inputs, it always returns the same output, and it has no side effects.
• Connect purity to Redux benefits: predictability, testability, and enabling features like time-travel debugging.

Where people lose the point

• ×Demonstrating state mutation within a reducer (e.g., `state.property = value`).
• ×Suggesting that reducers can perform asynchronous operations or other side effects.

What a strong answer covers

• Define the Redux store as the single object that holds the entire state tree of your application.
• List its main responsibilities: holding the application state, allowing access to state via `getState()`.
• Explain its role in allowing state updates via `dispatch(action)`.
• Mention its ability to register listener callbacks via `subscribe(listener)`.

Where people lose the point

• ×Suggesting that an application can have multiple Redux stores.
• ×Confusing the store with a database or a component's local state.

What a strong answer covers

• Explain the role of the `Provider` component from `react-redux` in wrapping the root React component and making the store available via Context.
• Describe how `useSelector` is used in functional components to extract specific pieces of state from the Redux store.
• Detail how `useDispatch` is used to get the `dispatch` function, allowing components to dispatch actions.
• Mention that `useSelector` automatically subscribes to the store and triggers re-renders when selected state changes.

Where people lose the point

• ×Forgetting to mention the `Provider` component or its purpose.
• ×Trying to access `store.getState()` or `store.dispatch()` directly within a React component without `react-redux` hooks.

What a strong answer covers

• Discuss the complexity and scale of the application: Redux shines in large applications with complex, global state management.
• Highlight the need for predictable state changes, robust debugging tools (DevTools), and middleware for side effects, which Redux provides out-of-the-box.
• Explain that `useContext` is suitable for simpler, less frequently updated global state or prop drilling avoidance, but can lead to performance issues with frequent updates due to re-renders of all consumers.
• Mention Redux's ecosystem for performance optimizations (e.g., `reselect` for memoized selectors) and structured patterns for state logic.

Where people lose the point

• ×Stating that Redux is always the superior choice for any state management.
• ×Not acknowledging the strengths of `useState` for local component state or `useContext` for simpler global state.

What a strong answer covers

• Explain that reducers must be pure and cannot handle side effects directly, necessitating middleware.
• Describe Redux Thunk: it allows action creators to return a function that receives `dispatch` and `getState`, enabling async logic before dispatching regular actions.
• Briefly mention Redux Saga as an alternative for more complex, declarative side effect management using generator functions.
• Emphasize that middleware intercepts actions before they reach the reducers, providing a place for async logic.

Where people lose the point

• ×Suggesting that asynchronous logic can be directly placed within reducers.
• ×Not understanding the role of middleware in enabling side effects.

What a strong answer covers

• Define immutability in Redux: state changes are achieved by creating new state objects, rather than modifying existing ones.
• Explain how this is typically done using spread operators (`...`) or functions like `Object.assign()` (or Immer with Redux Toolkit).
• Detail the benefits: predictability (easier to reason about state), easier debugging (time-travel), performance optimizations (shallow comparison for re-renders), and enabling pure reducers.
• Contrast with mutable updates, which can lead to unexpected side effects and difficult-to-track bugs.

Where people lose the point

• ×Confusing immutability with simply declaring variables as `const`.
• ×Not explaining *how* immutability is achieved in practice (e.g., using spread syntax).

What a strong answer covers

• Define Redux Toolkit (RTK) as the official, opinionated, batteries-included toolset for efficient Redux development.
• Explain that it solves common Redux problems like excessive boilerplate code for actions and reducers.
• Highlight its role in simplifying store setup with good defaults and enforcing best practices.
• Mention key features like `configureStore`, `createSlice`, and `createAsyncThunk` as solutions to these problems.

Where people lose the point

• ×Thinking Redux Toolkit is a complete rewrite of Redux, rather than an abstraction layer.
• ×Not being able to name any specific features or utilities provided by RTK.

What a strong answer covers

• Explain that `createSlice` is a function that accepts an object with `name`, `initialState`, and `reducers` fields.
• Detail how it automatically generates action creators and action types based on the `reducers` object.
• Mention that it internally uses the Immer library, allowing you to write 'mutating' logic directly within your reducers while still producing immutable updates.
• Illustrate how it combines the definition of state, actions, and reducers into a single, cohesive unit, reducing boilerplate.

Where people lose the point

• ×Not mentioning the role of Immer in allowing 'mutating' logic within `createSlice` reducers.
• ×Confusing `createSlice` with `combineReducers` or other Redux utilities.

What a strong answer covers

• Define a selector as a function that takes the Redux state as an argument and returns a specific piece of data from it.
• Explain that `useSelector` in `react-redux` uses selectors to subscribe to specific parts of the state.
• Detail their usefulness in preventing unnecessary component re-renders by only selecting the data a component needs.
• Mention that selectors can encapsulate logic for deriving computed data from the state and can be memoized (e.g., with `reselect`) for performance optimization.

Where people lose the point

• ×Fetching too much state in a component, leading to unnecessary re-renders.
• ×Not understanding the performance benefits of memoized selectors for derived state.

What a strong answer covers

• Propose a feature-based folder structure (e.g., 'ducks' pattern or 'slices' with Redux Toolkit) where all Redux-related files for a feature (actions, reducers, selectors) reside together.
• Explain the use of `combineReducers` to compose smaller, domain-specific reducers into a single root reducer.
• Discuss the concept of normalized state for managing collections of items to avoid data duplication and simplify updates.
• Mention the importance of well-defined selectors to abstract state shape from components and facilitate refactoring.

Where people lose the point

• ×Suggesting a monolithic reducer for a large application.
• ×Not considering how to scale the Redux architecture for maintainability and collaboration.

What a strong answer covers

• Explain its primary benefit: time-travel debugging, allowing developers to step through state changes and actions.
• Describe its ability to inspect the state at any point in time and view the payload of dispatched actions.
• Mention features like replaying actions, hot reloading reducers, and customizing state serialization.
• Highlight how it enhances developer productivity by providing deep insight into application state flow and debugging complex issues.

Where people lose the point

• ×Only stating 'it helps with debugging' without elaborating on specific features.
• ×Not knowing about time-travel debugging or action inspection capabilities.

What a strong answer covers

• Explain that the `Provider` component wraps the entire React application.
• State its main purpose: to make the Redux store available to all nested components within the component tree.
• Mention that it achieves this by utilizing React's Context API.
• Clarify that without `Provider`, `useSelector` and `useDispatch` hooks would not be able to access the store.

Where people lose the point

• ×Thinking `Provider` is only for the root component and not understanding its role in context propagation.
• ×Not connecting `Provider` to how `react-redux` hooks access the store.