Summary - Redux Toolkit

Set up a cart slice and store and connect them to a component.

Summary - Redux Toolkit

In this group you learned what RTK is, how to write a slice with createSlice, and how to set up a store with configureStore. Now it's time to combine them.

Typical flow: write a cart slice with createSlice; connect it to a store with configureStore; wrap the app with Provider; components read and change the cart with useSelector and useDispatch.

In the next step you will write a complete cart flow.

Exercise Write Cart component

Complete the skeleton. Write a Cart component. Read state.cart.items with useSelector (state parameter). Get dispatch with useDispatch. Render <ul> with items.map((item, i) => <li key={i}>{item.name}</li>). Add export default.

Show example solution

import { useSelector, useDispatch } from 'react-redux';
import { addItem } from './cartSlice';

function Cart() {
  const items = useSelector((state) => state.cart.items);
  const dispatch = useDispatch();
  return (
    <ul>
      {items.map((item, i) => (
        <li key={i}>{item.name}</li>
      ))}
    </ul>
  );
}

export default Cart;

Test yourself

Which topic was NOT covered in this group?
```
Three topics were covered; RSC was not.
```
- createSlice
- configureStore
- Provider
- Server Components
Show answer

Server Components — Server Components were not covered in this group.

useDispatch call

const ____ = useDispatch();

Show answer

const dispatch = useDispatch();

Next lesson: What is Zustand?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies