Modern State Management with Redux Toolkit

Introduction to Redux Toolkit

Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development.

Setting Up Redux Toolkit

Install the required packages:

npm install @reduxjs/toolkit react-redux

Creating a Store

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './slices/counterSlice';
 
export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});
 
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Creating Slices

Slices combine reducers and actions:

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
interface CounterState {
  value: number;
}
 
const initialState: CounterState = {
  value: 0,
};
 
export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});
 
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

Using in Components

import { useAppDispatch, useAppSelector } from './hooks';
import { increment, decrement } from './slices/counterSlice';
 
function Counter() {
  const count = useAppSelector((state) => state.counter.value);
  const dispatch = useAppDispatch();
 
  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

Async Operations with createAsyncThunk

Handle async operations cleanly:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 
export const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async (userId: string) => {
    const response = await fetch(`/api/user/${userId}`);
    return response.json();
  }
);
 
const userSlice = createSlice({
  name: 'user',
  initialState: { entity: null, loading: false },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.loading = false;
        state.entity = action.payload;
      });
  },
});

Benefits

Less boilerplate code
Built-in Immer for immutable updates
DevTools integration
TypeScript support

Conclusion

Redux Toolkit simplifies Redux development while maintaining all its power and flexibility.