狀態管理

Context ／ Zustand ／ Redux Toolkit

比較效果

用每個函式庫做了同樣的東西，動手試試看。

Context

Zustand

Redux Toolkit

比較程式碼

修改程式碼，右邊的預覽會跟著變化。

import { createContext, useContext, useState } from "react"
import { CartHeader, ProductRow, Shell } from "./ui"

const CartContext = createContext({ count: 0, add: () => {} })

function Header() {
  const { count } = useContext(CartContext)
  return <CartHeader count={count} />
}

function Product({ name }: { name: string }) {
  const { add } = useContext(CartContext)
  return <ProductRow name={name} onAdd={add} />
}

export default function App() {
  const [count, setCount] = useState(0)
  const add = () => setCount(count + 1)

  return (
    <CartContext.Provider value={{ count, add }}>
      <Shell>
        <Header />
        <Product name="商品 A" />
        <Product name="商品 B" />
      </Shell>
    </CartContext.Provider>
  )
}