Redux: Predictable State Container (RTK + RTK Query)
Redux provides predictable state updates and excellent debugging. Modern Redux = Redux Toolkit (slices, configureStore, createAsyncThunk) + RTK Query for server state. Use it when you need strong architecture for complex shared state and large teams.
The store is the single source of truth. Actions are formal requests to change state. Reducers are the only editors allowed to update the store. This predictability makes debugging and testing much easier at scale.
1Redux Toolkit Patterns
Use createSlice for state + reducers + actions. configureStore for store setup. createAsyncThunk for async logic.
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1 }
}
});
export const { increment } = counterSlice.actions;
export default counterSlice.reducer;2Performance: Normalization + Selectors
Store entities by ID (normalized). Use selectors and createSelector (Reselect) to compute derived data efficiently and prevent unnecessary rerenders.
3RTK Query for Server State
The recommended way to handle API data in Redux. Automatic caching, deduping, invalidation with tags, and optimistic updates.
| Property | Redux Toolkit | RTK Query |
|---|---|---|
| Best For | Complex shared state, large teams | Server/API data |
| Boilerplate | Medium (structured) | Low |
| Performance | Excellent with selectors | Built-in caching |
Redux Toolkit
Best For
Complex shared state, large teams
Boilerplate
Medium (structured)
Performance
Excellent with selectors
RTK Query
Best For
Server/API data
Boilerplate
Low
Performance
Built-in caching
Common questions
- ›“When should you use Redux vs Zustand or Context?”
- ›“How do you keep Redux performant at scale?”
- ›“What is RTK Query and when should you use it?”
- ›“Explain state normalization in Redux.”
What interviewers look for
- Clear reasoning for choosing Redux (shared state + team scale)
- Understanding of normalization and selectors
- Modern Redux = RTK + RTK Query
- Performance awareness (selectors, avoiding unnecessary rerenders)
Short answer (60 sec)
Use Redux Toolkit for complex shared state with strong debugging needs. Use RTK Query for server data caching. Keep state normalized and use selectors for performance.
Detailed answer (senior level)
Redux shines in large apps with many shared state flows. Use createSlice and configureStore from Redux Toolkit. For server state, prefer RTK Query over manual thunks. Normalize entities by ID, use createSelector for derived data, and memoize to prevent rerenders. This combination gives predictability, excellent DevTools, and great performance.
- Using Redux for simple apps (overkill)
- Storing server data manually instead of using RTK Query
- Selecting large state objects (causes rerenders)
- Not normalizing data (deep nesting)
- Scattering async logic across components
- ✓Redux = predictable shared state container
- ✓Modern Redux = Redux Toolkit everywhere
- ✓RTK Query = best for server/API state
- ✓Normalize entities by ID for performance
- ✓Use selectors (createSelector) to avoid rerenders
- ✓Redux is a team-scale and debugging tool
- ✓Measure and optimize based on real rerender patterns