Redux Interview Questions — Medium

• Middleware sits between dispatch and the reducer - it can log, transform, delay, or swallow actions.
• Signature: store => next => action => result. Calling next(action) forwards to the next middleware; calling dispatch(...) instead restarts from the chain's head.
• Composition order matters: middleware applied earlier sees actions first on the way IN and last on the way OUT.
• Classic uses: thunks (async), logging/crash reporting, routing sync, analytics. RTK pre-installs thunk + devtools; add custom ones via configureStore({ middleware: g => g().concat(logger) }).

---

const fetchUser = id => async (dispatch, getState) => {
  dispatch(loadingStarted());
  try { dispatch(loadSucceeded(await api.getUser(id))); }
  catch (e) { dispatch(loadFailed(e.message)); }
};

• A thunk is any function dispatched instead of a plain object; the middleware invokes it lazily with (dispatch, getState) - enabling side effects and multi-step dispatches.
• Limits: no cancellation built-in, race conditions need manual guards, complex flows become nested callback soup, hard to test interleavings.
• For heavy async choreography teams graduate to RTK Query (data) or sagas/orchestration libs (flows).

---

const fetchUser = createAsyncThunk('user/fetch', async (id, { signal }) =>
  api.getUser(id, { signal }));

Emits three actions automatically: pending, fulfilled (payload = return value), rejected (payload = serialized error unless rejectWithValue).

• Handle them via extraReducers builders - keeps slice reducers declarative.
• Built-ins you get for free: AbortSignal (thunk.dispatch(fetchUser.abort()) or condition option), single-flight dedupe per arg (condition callback), and typed payload preparation via payloadCreator's second arg { dispatch, getState, rejectWithValue }.

---

• Scenario: search input fires request per keystroke; slow stale response overwrites fresh results.
• Guards ladder:
  1. AbortController passed into fetch via thunkAPI.signal; abort prior request before starting new one.
  2. Request-id check: capture id before await; ignore fulfillment if getState() shows newer id.
  3. RTK Query / TanStack Query: subscription-based caches handle this natively (last-arg wins). Interview gold: describe both the symptom (flicker of wrong data) and two independent defenses (cancel + discard).

---

const selectVisible = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => todos.filter(t => matches(t, filter)) // reruns only on input change
);

• useSelector runs after EVERY action; unmemoized derived selectors recompute (and produce new array references → re-renders) even when inputs didn't change.
• Reselect caches the last computation keyed by reference equality of inputs: cheap skip when unrelated slices changed.
• Pitfalls: default cache size 1 - alternating inputs thrash it (create per-component factories); input selectors returning new objects defeat memoization entirely.

---