Summary - useReducer

Combine reducer, dispatch and initial state to write a shopping cart.

Summary - useReducer

In this group you learned useReducer. The reducer is a pure function that computes state, dispatch sends an action, initial state is the starting value. You combine them to manage complex state.

Now you will build a shopping cart: the reducer handles the add-to-cart action; dispatch is called from a button. This is one of the most common real-world scenarios for useReducer. First you write the reducer, then the component; at the end you have a working cart.

Exercise Write the cart reducer

Write a cartReducer function. state is an array (products). With switch (action.type) return [...state, action.payload] in the "add" case. In the default branch return state.

Show example solution

function cartReducer(state, action) {
  switch (action.type) {
    case "add":
      return [...state, action.payload];
    default:
      return state;
  }
}

Exercise Write the cart component

Write a Cart component. Call useReducer with cartReducer and an empty array [] as initial state. When a button is pressed call dispatch({ type: "add", payload: "Apple" }). The component returns <Text>{state.length}</Text>.

Show example solution

import { useReducer } from "react";
import { Button, Text } from "react-native";

function cartReducer(state, action) {
  switch (action.type) {
    case "add":
      return [...state, action.payload];
    default:
      return state;
  }
}

function Cart() {
  const [state, dispatch] = useReducer(cartReducer, []);
  return (
    <>
      <Button onPress={() => dispatch({ type: "add", payload: "Apple" })} title="Add" />
      <Text>{state.length}</Text>
    </>
  );
}

Test yourself

When is useReducer a good fit?
```
const [state, dispatch] = useReducer(reducer, initialState);
```
- For complex state transitions
- Stil verisinde
- AsyncStorage'da
- Navigasyonda
Show answer

For complex state transitions — useReducer fits complex state transitions.
Match each piece to its role

reducer

Computes state
dispatch

Sends an action
initialState

Starting value
action.payload

Extra data

Call useReducer

const [state, dispatch] = ____(cartReducer, []);

Show answer

const [state, dispatch] = useReducer(cartReducer, []);

Next lesson: Controlled form

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies