React Redux Toolkit Tutorial

What is Redux Toolkit Tutorial in React?

Redux Toolkit is the official, recommended way to use Redux. createSlice generates action creators and reducers together, and lets you write code that looks like mutation while producing immutable updates through Immer.

Why Redux Toolkit Tutorial matters

Classic Redux required action type constants, switch reducers, action creators and manual immutability — several files per feature. Toolkit reduces the same feature to one slice.

Redux Toolkit Tutorial example

import { createSlice, configureStore } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] },
  reducers: {
    add(state, action) { state.items.push(action.payload); },   // Immer makes this safe
    remove(state, action) {
      state.items = state.items.filter(i => i.id !== action.payload);
    },
  },
});

export const { add, remove } = cartSlice.actions;

export const store = configureStore({
  reducer: { cart: cartSlice.reducer },
});

Reading and writing from a component

import { useSelector, useDispatch } from 'react-redux';

function CartBadge() {
  const count = useSelector(state => state.cart.items.length);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(add(job))}>Cart ({count})</button>;
}

Key points to remember

• Wrap the app in <Provider store={store}> once, at the root.
• The mutation-looking code inside reducers is safe only because of Immer.
• Select the narrowest slice of state you need — a selector returning a new object re-renders every time.
• configureStore enables the Redux DevTools and sensible middleware by default.

Common mistakes with Redux Toolkit Tutorial

• Mutating state outside a createSlice reducer, where Immer is not active.
• useSelector(state => state) — subscribes to everything and re-renders constantly.
• Returning a new array from a selector without a memoised selector, defeating the equality check.