What is Redux Toolkit (RTK) and why was it created?

Redux Toolkit (RTK) is the official, opinionated, standard toolset for efficient Redux development. It was created by the Redux team to eliminate excessive boilerplate code, simplify store setup, prevent common mutator bugs with Immer, and include Redux Thunk out-of-the-box.

Why can we write mutating code like 'state.items.push()' inside RTK slices?

Under the hood, Redux Toolkit wraps your reducer logic in the 'Immer' library. Immer uses JavaScript Proxies to record your mutations and automatically produces a brand new, completely immutable state object.

How does a component read data from the Redux store?

Using the 'useSelector' hook: const cartItems = useSelector((state) => state.cart.items). The component only re-renders when the specific selected slice of state changes.

Redux Toolkit (RTK): Modern Enterprise State Management

While React's built-in useState and useReducer hooks handle local component state effectively, large enterprise applications often require a centralized, predictable global store that can be accessed, debugged, and inspected across hundreds of screens. Redux Toolkit (RTK) is the modern, official standard for writing Redux logic.

Figure 12: Redux Toolkit: Single Store, createSlice Reducers, and useSelector/useDispatch Subscriptions.

Step 1: Install Redux Toolkit & React-Redux

npm install @reduxjs/toolkit react-redux

Step 2: Create a Feature Slice (createSlice)

// src/features/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Immer allows direct mutation syntax safely!
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

// Auto-generated action creators
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// Reducer export
export default counterSlice.reducer;

Step 3: Configure the Redux Store

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

Step 4: Provide Store to React & Consume with Hooks

// src/components/CounterView.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from '../features/counterSlice';

export default function CounterView() {
  // 1. Read state slice from Redux store
  const count = useSelector((state) => state.counter.value);
  // 2. Dispatch actions
  const dispatch = useDispatch();

  return (
    <div className="redux-card">
      <h3>Redux Global Count: {count}</h3>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  );
}