深入对比三种主流的React状态管理方案(Redux Toolkit vs Zustand vs Context API)

// store/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
    loading: false
  },
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    setLoading: (state, action) => {
      state.loading = action.payload
    }
  }
})

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

// 组件中使用
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './store/counterSlice'

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

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

// stores/counterStore.js
import { create } from 'zustand'

const useCounterStore = create((set, get) => ({
  count: 0,
  loading: false,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  setLoading: (loading) => set({ loading }),
  reset: () => set({ count: 0 })
}))

// 组件中使用
function Counter() {
  const { count, loading, increment, decrement } = useCounterStore()
  
  return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
    </div>
  )
}

// 选择性订阅优化
function OptimizedCounter() {
  const count = useCounterStore(state => state.count)
  const increment = useCounterStore(state => state.increment)
  
  return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
    </div>
  )
}

// contexts/CounterContext.js
import React, { createContext, useContext, useReducer, useMemo } from 'react'

const CounterContext = createContext()

const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 }
    case 'DECREMENT':
      return { ...state, count: state.count - 1 }
    case 'SET_LOADING':
      return { ...state, loading: action.payload }
    default:
      return state
  }
}

export function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(counterReducer, {
    count: 0,
    loading: false
  })

  const actions = useMemo(() => ({
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    setLoading: (loading) => dispatch({ type: 'SET_LOADING', payload: loading })
  }), [])

  const value = useMemo(() => ({
    ...state,
    ...actions
  }), [state, actions])

  return (
    <CounterContext.Provider value={value}>
      {children}
    </CounterContext.Provider>
  )
}

export const useCounter = () => {
  const context = useContext(CounterContext)
  if (!context) {
    throw new Error('useCounter must be used within a CounterProvider')
  }
  return context
}

// 组件中使用
function Counter() {
  const { count, loading, increment, decrement } = useCounter()
  
  return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
    </div>
  )
}

interface CounterState {
  value: number
  loading: boolean
}

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0, loading: false } as CounterState,
  reducers: {
    increment: (state) => {
      state.value += 1
    }
  }
})

type RootState = ReturnType<typeof store.getState>
type AppDispatch = typeof store.dispatch

export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

interface CounterState {
  count: number
  loading: boolean
  increment: () => void
  decrement: () => void
  setLoading: (loading: boolean) => void
}

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  loading: false,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  setLoading: (loading) => set({ loading })
}))

interface CounterState {
  count: number
  loading: boolean
}

interface CounterActions {
  increment: () => void
  decrement: () => void
  setLoading: (loading: boolean) => void
}

type CounterContextType = CounterState & CounterActions

const CounterContext = createContext<CounterContextType | undefined>(undefined)