状态管理
三大方案 深度对比

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface CounterState {
  count: number
  bears: number
  increase: () => void
  decrease: () => void
  reset: () => void
  addBears: (n: number) => void
}

// 一行代码，一个函数，就是整个 store
export const useCounterStore = create<CounterState>()(
  persist(
    (set) => ({
      count: 0,
      bears: 0,
      increase: () => set((s) => ({ count: s.count + 1 })),
      decrease: () => set((s) => ({ count: s.count - 1 })),
      reset: () => set({ count: 0 }),
      addBears: (n) => set((s) => ({ bears: s.bears + n })),
    }),
    { name: 'counter-storage' }
  )
)

'use client'
import { useCounterStore } from '@/store/counter'

export function Counter() {
  // 选择性订阅，精准重渲染
  const count = useCounterStore((s) => s.count)
  const increase = useCounterStore((s) => s.increase)
  const decrease = useCounterStore((s) => s.decrease)

  return (
    <div className="counter">
      <button onClick={decrease}>-</button>
      <span>{count}</span>
      <button onClick={increase}>+</button>
    </div>
  )
}

// 💡 无需 Provider 包裹！
// 💡 可以在组件外直接调用：
//    useCounterStore.getState().increase()

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface CounterState {
  value: number
  status: 'idle' | 'loading'
}

const initialState: CounterState = {
  value: 0,
  status: 'idle',
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Immer 让你"直接修改"，实际生成新状态
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
    reset: () => initialState,
  },
})

export const { increment, decrement, 
               incrementByAmount, reset } 
  = counterSlice.actions
export default counterSlice.reducer

'use client'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from '@/store/counterSlice'
import type { RootState } from '@/store/store'

export function Counter() {
  const count = useSelector(
    (state: RootState) => state.counter.value
  )
  const dispatch = useDispatch()

  return (
    <div className="counter">
      <button onClick={() => dispatch(decrement())}>
        -
      </button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>
        +
      </button>
    </div>
  )
}

// 📌 需要用 <Provider store={store}> 包裹
// 📌 Redux DevTools 自动集成

import { makeAutoObservable, runInAction } from 'mobx'

class CounterStore {
  count = 0
  name = 'My Counter'

  constructor() {
    // MobX 6: 自动将所有属性变为 observable
    makeAutoObservable(this)
  }

  get doubled() {
    // computed: 自动缓存，依赖变化时重算
    return this.count * 2
  }

  increment() {
    this.count += 1  // 直接修改！
  }

  decrement() {
    this.count -= 1
  }

  // 异步操作需要用 runInAction
  async fetchData() {
    const data = await api.getCount()
    runInAction(() => {
      this.count = data.count
    })
  }
}

export const counterStore = new CounterStore()

'use client'
import { observer } from 'mobx-react-lite'
import { counterStore } from '@/store/CounterStore'

// observer HOC 自动追踪组件用到的
// 所有 observable 属性，精准重渲染
export const Counter = observer(() => {
  const { count, doubled, increment, decrement } 
    = counterStore

  return (
    <div className="counter">
      <button onClick={decrement}>-</button>
      <span>{count} (×2 = {doubled})</span>
      <button onClick={increment}>+</button>
    </div>
  )
})

// 💡 无需 Provider！Store 是普通实例
// 💡 直接 import 即可在任何地方使用
// 💡 computed 自动缓存，不会重复计算