Redux Toolkit store

Set up a product slice and store with Redux Toolkit.

Redux Toolkit store setup

In this lesson you set up a store with configureStore and wrap the app with Provider. The cart slice connects to the store; components access it via useSelector and useDispatch.

The starting code contains the previous lesson's solution; you add the store and Provider code. This is the natural continuation of the project flow.

The RTK store ships with redux-thunk; no extra middleware is needed for async. DevTools are auto-enabled.

useSelector and useDispatch

In components you read state with useSelector and dispatch actions with useDispatch. For example const items = useSelector((state) => state.cart.items) reads the cart.

To add a product you get const dispatch = useDispatch() and call dispatch(addItem(product)). RTK action creators auto-add the payload.

A selector triggers render only when the relevant piece changes; fine-grained selectors boost performance.

Exercise Set up store and Cart component

Complete the skeleton. Create store with configureStore; reducer: { cart: cartReducer }. Import cartReducer from './cartSlice'. Add export default store.

Show example solution

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
});

export default store;

Test yourself

What does Provider do?
```
Provider = store + app.
```
- Creates the store
- Connects the store to the app
- Loads CSS
- Runs tests
Show answer

Connects the store to the app — Provider connects the store to the app.

useSelector call

const items = ____((state) => state.cart.items);

Show answer

const items = useSelector((state) => state.cart.items);

Redux Toolkit store: match the terms

configureStore

Sets up store
Provider

Wraps app
useSelector

Reads state
addItem

Action creator

Next lesson: Zustand cart store

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies