Redux
28 bites tagged Redux — interview questions with model answers, and 60-second explainers.
State normalization for relational data
Store entities by id in lookup tables, reference relationships by id, avoid nesting and duplication. modeling relational data in a flat store. deeply nested arrays that force cascading updates and stale duplicates.
Memoized selectors with Reselect
Selectors encapsulate state reads, Reselect memoizes computed results by input identity, preventing recomputation and unnecessary re-renders. knowledge of derived state and re-render control.
Redux versus Zustand state management
Redux uses actions, reducers, and a Provider with structured boilerplate; Zustand offers a minimal hook-based store with no provider and selective subscriptions. judgment about state-library tradeoffs.
Handling async API calls in Redux
Middleware intercepts dispatched actions, Thunk dispatches functions for simple flows, Saga uses generators for complex orchestration. understanding of async side effects in a synchronous store.
Redux principles: store, actions, reducers
One store holds all state; actions are plain objects describing what happened; pure reducers compute the next immutable state from current state and action; dispatch drives the cycle. Redux's core model.
Local state versus global state management
Keep state local with useState/useReducer when it is used by one component or its subtree; reach for Redux or Zustand when many distant components share and mutate the same state. scoping state correctly.
Compare MVVM with unidirectional flow (TCA, Redux)
MVVM is lightweight with bidirectional binding and per-screen view models; unidirectional flow centralizes a single state mutated only by reducers via actions, gaining predictability and testability at… architectural trade-off judgment.
What drives your choice between Zustand and Redux Toolkit at scale?
What it tests: matching state philosophy to constraints, not hype. Outline: weigh Zustand's minimal footprint against Redux Toolkit's DevTools and structured async patterns. Red flag: claiming one is always better regardless of team size or debugging needs.
How to implement a derived Redux slice performantly and maintainably?
This tests minimal state and memoized selector design. Use Reselect's createSelector to compute data from multiple slices, keeping state minimal and avoiding redundant work. A red flag is storing derived values in Redux or recalculating without memoization.
Explain atomic state management and how it differs from Redux
This tests bottom-up vs top-down architecture. Good response contrasts atom graphs with Redux's monolithic store, notes atoms avoid extra rerenders sans selectors, and flags granular subscriptions.
How would you handle an async API call in Redux Toolkit versus Zustand?
Tests structured async state machines versus lightweight patterns. A strong answer contrasts createAsyncThunk's pending/fulfilled/rejected lifecycles with Zustand's direct set() in async functions, noting Redux's traceability trade-off.
How do you select a single property and prevent extra re-renders?
Tests selector granularity and reference equality in subscriptions. Great answer: return a primitive via a focused selector; for objects, memoize with createSelector or pass shallowEqual. Red flag: reaching for useMemo or React.memo before fixing the selector.
How do Redux actions, reducers, and click-to-render data flow work?
Tests Redux unidirectional flow and immutability. Strong answer: actions are plain event objects, reducers are pure functions returning new state, and flow goes dispatch to store to UI. Red flag: actions mutating state or reducers with side effects.
When would you choose Redux or Zustand over React's built-in hooks?
Choose global state when many components share rapidly changing state, logic is complex, or updates must be traceable. when Context and useState fail at scale.
Memoizing Selectors: Avoid Needless Re-renders
Memoized selectors prevent needless re-renders by caching derived data. A selector for a filtered list will only re-run its logic if the original list or filter criteria change, not on every state update.
RTK Query: Your Redux Data Fetching Layer
RTK Query treats server data as a cache, not global state, handling fetching and loading states for you. Use it to replace manual fetch logic and keep data fresh across components. Forgetting to call `setupListeners` disables automatic refetching.
SSR State Hydration: Syncing Server and Client State
SSR hydration syncs server and client state to prevent UI errors. The server renders the page with initial data, then sends that data to the client to "hydrate" its own state store. The footgun is using a global store on the server, which leaks data.
State Normalization: Treat Your Store Like a Database
Treat your Redux state like a database. Instead of nesting related data, flatten it into separate 'tables' keyed by ID. This simplifies updates and prevents unnecessary re-renders. The footgun is storing API data as-is, creating update bugs.
Redux Toolkit: `createSlice` Bundles Your Redux Logic
`createSlice` bundles a piece of state, its reducers, and action creators into one unit, killing Redux boilerplate. Use it to organize your store by feature. The footgun: its "mutating" syntax only works here due to Immer, not in plain Redux.
Redux: Actions are Events, Reducers are Event Handlers
Redux Actions are events describing *what* happened (e.g., 'task added'), while Reducers are functions that specify *how* state changes in response. This pattern is central to managing global state. The biggest footgun is mutating state directly in a reducer.
Single Source of Truth: Centralized App State
A Single Source of Truth consolidates all application state into one central object, or 'store.' This makes state predictable and easier to debug, especially in libraries like Redux, by creating one place to look for data.
Memoized Selectors: Avoid Needless Re-renders
A memoized selector caches its result, re-running only if its inputs from the Redux store change. Use it to compute derived data like a filtered list without triggering needless re-renders.
Redux Saga: Managing Side Effects with Generators
Redux Saga runs side effects in a separate thread-like process. It listens for Redux actions and executes complex async tasks, like API calls, keeping that logic out of your components.
Redux Middleware: Intercepting Actions Before Reducers
Redux middleware is like an Express middleware for your state, intercepting actions before they hit the reducer. It's used for logging, crash reporting, or async API calls. The footgun is forgetting to call `next(action)`, which silently blocks the action.
Get Redux bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.