Redux: Predictable State Container (RTK + RTK Query)
Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.
Topic content
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.
- ✓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