Features
- createSlice for reducers with Immer integration
- RTK Query for data fetching and caching
- configureStore with good defaults
- createAsyncThunk for async logic
- Redux DevTools integration
Pros
- Industry standard with extensive ecosystem
- RTK Query eliminates boilerplate for API calls
- Excellent DevTools for debugging state changes
- Predictable state updates with Immer
Cons
- More boilerplate than simpler alternatives like Zustand
- Learning curve for Redux concepts (actions, reducers, selectors)
- Can be overkill for small to medium applications
Overview
Redux Toolkit (RTK) is the official, opinionated toolset for Redux development. It simplifies the most common Redux use cases — store setup, reducer creation, immutable update logic, and async operations — while maintaining Redux’s core principle of predictable state management through unidirectional data flow.
RTK Query, included in Redux Toolkit, provides a powerful data fetching and caching solution that eliminates the need to hand-write data fetching logic. It generates React hooks for API endpoints, handles caching, invalidation, polling, and optimistic updates automatically.
When to Use
Redux Toolkit is the right choice for large applications with complex state logic, when you need powerful DevTools for debugging state changes, or when your team is already experienced with Redux. RTK Query makes it compelling even for applications primarily dealing with server state.
Getting Started
npm install @reduxjs/toolkit react-reduximport { createSlice, configureStore } from "@reduxjs/toolkit";
const counterSlice = createSlice({
name: "counter",
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; },
decrement: (state) => { state.value -= 1; },
},
});
export const { increment, decrement } = counterSlice.actions;
export const store = configureStore({ reducer: { counter: counterSlice.reducer } });