Part 31: Modern Redux Toolkit (RTK): Store, Slices & Dispatch

Redux Toolkit (RTK) is the official, opinionated, battery-included toolset for efficient Redux development. It completely eliminates legacy Redux boilerplate (action types, action creators, switch statements, and manual immutable updates).

1. Installation

npm install @reduxjs/toolkit react-redux

2. Creating a State Slice (counterSlice.js)

RTK uses createSlice which automatically generates action creators and action types. Under the hood, it uses Immer, allowing you to write "mutative" code that produces safe immutable copies:

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

const initialState = {
  value: 0,
};

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

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

3. Configuring the Redux Store (store.js)

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

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

4. Connecting to React and Consuming

Wrap your app with <Provider>:

import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Consume inside components using useSelector and useDispatch:

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

export default function CounterComponent() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div className="p-4 border rounded">
      <h2>Current Count: {count}</h2>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  );
}

Key Takeaways

• Redux Toolkit eliminates traditional Redux boilerplate.
• createSlice handles action types, action creators, and reducers in one place.
• Immer enables clean, direct property mutations safely.

In Part 32, we will master Asynchronous Redux with createAsyncThunk!