Redux Toolkit Guide

Redux ToolkitOfficial Redux Logic

The official, opinionated, batteries-included toolset for efficient Redux development.

Contents

Redux Basics

Redux is a predictable state container for JavaScript apps. Redux Toolkit simplifies Redux usage.

Store

Single source of truth for application state

Actions

Plain objects describing what happened

Reducers

Pure functions that update state

typescript
// Installation
npm install @reduxjs/toolkit react-redux

// Basic Redux Flow
// 1. User Action → 2. Dispatch Action → 3. Reducer Updates State → 4. Store Updates → 5. Components Re-render

// Simple Counter Example
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Immer handles immutability
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;