Redux with React

Redux Toolkit Basics

RTK's createSlice defines name, initial state, and reducers in one place. Immer allows 'mutating' syntax in reducers safely. configureStore sets up the store with good defaults.

Use Redux when global client state is complex, many features interact with the same data, or you need middleware, DevTools, and strict update patterns across a large team.

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    addBy: (state, action) => { state.value += action.payload; },
  },
});

const count = useSelector(state => state.counter.value);
const dispatch = useDispatch();
dispatch(counterSlice.actions.increment());

RTK generates action creators automatically from slice reducers.

Redux Toolkit Setup

// store.js
export const store = configureStore({ reducer: { counter: counterSlice.reducer } });

// main.jsx
<Provider store={store}><App /></Provider>

• Install @reduxjs/toolkit and react-redux.
• One slice per feature domain is a good starting split.
• Use typed hooks useAppDispatch / useAppSelector in TypeScript.
• RTK Query can live alongside slices for API caching.

Redux Toolkit API

Core RTK APIs for React integration.

Redux vs Zustand

Redux shines with large teams, strict patterns, DevTools, and middleware. Zustand is lighter with less boilerplate for small-to-medium apps. Both are valid — match team size and complexity.

Async with createAsyncThunk

RTK's createAsyncThunk handles pending/fulfilled/rejected states for API calls, integrating with slices via extraReducers.

Common Mistakes

• Using Redux for all server state instead of TanStack Query.
• Selecting entire store causing unnecessary re-renders.
• Mutating state outside Immer-powered reducers in plain Redux.
• Skipping Redux Toolkit and using legacy boilerplate patterns.

Key Takeaways

• Redux Toolkit is the modern standard for Redux in React.
• createSlice + configureStore minimize boilerplate.
• Use for complex global client state, not all API data.
• Compare with Zustand based on team and app size.