状态管理

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>
  )
}