如何使用React Context API打造类似Redux Toolkit或Zustand的全局状态存储？

嘿，我来给你一步步拆解怎么用React Context API搭一个像Redux Toolkit或者Zustand那样顺手的全局状态存储——不用额外装库，纯React原生搞定！

1. 先封装状态核心逻辑（对标Redux Slice） #

首先我们要把状态和修改逻辑收拢在一起，用useReducer来管理状态变化，这样比零散的useState更像Redux的思路，也更容易维护。

先写一个reducer函数处理不同的状态更新动作，再定义初始状态：

// 处理状态更新的reducer函数
const globalReducer = (state, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'TOGGLE_THEME':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    // 后续加新的状态操作直接加case就行
    default:
      throw new Error(`Unknown action type: ${action.type}`);
  }
};

// 初始全局状态
const initialState = {
  user: null, // 存储用户信息
  theme: 'light' // 主题状态
};

2. 创建Context和全局Provider组件 #

接下来用React的createContext创建全局上下文，再写一个Provider组件把状态和操作方法传递给所有子组件：

import { createContext, useContext, useReducer, useMemo } from 'react';

// 创建全局Context，初始值设为null就行，后面用Provider覆盖
const GlobalContext = createContext(null);

// 全局Provider，用来包裹你的整个App
export const GlobalProvider = ({ children }) => {
  const [state, dispatch] = useReducer(globalReducer, initialState);

  // 把dispatch封装成更直观的方法，不用每次写dispatch({type: ...})
  // 用useMemo缓存这些方法，避免不必要的重渲染
  const actions = useMemo(() => ({
    setUser: (userData) => dispatch({ type: 'SET_USER', payload: userData }),
    toggleTheme: () => dispatch({ type: 'TOGGLE_THEME' })
  }), [dispatch]);

  // 用useMemo缓存Context的value，只有state或actions变化时才更新
  const contextValue = useMemo(() => ({
    state,
    ...actions
  }), [state, actions]);

  return (
    <GlobalContext.Provider value={contextValue}>
      {children}
    </GlobalContext.Provider>
  );
};

3. 写一个自定义Hook简化调用（对标Zustand的直接调用） #

每次写useContext(GlobalContext)太麻烦，还容易忘在Provider外面用，所以封装一个自定义Hook，既简化调用，又能做错误提示：

export const useGlobalStore = () => {
  const context = useContext(GlobalContext);
  if (!context) {
    throw new Error('useGlobalStore必须在GlobalProvider内部使用哦！');
  }
  return context;
};

4. 用Provider包裹你的整个App #

在项目的入口文件（比如index.js或者App.js）里，把所有组件用GlobalProvider包起来，这样整个App都能访问全局状态了：

import { GlobalProvider } from './GlobalStore';
import Header from './Header';
import Home from './Home';

function App() {
  return (
    <GlobalProvider>
      <Header />
      <Home />
      {/* 其他所有页面/组件都放这里面 */}
    </GlobalProvider>
  );
}

export default App;

5. 在任意组件中使用全局状态 #

现在不管哪个组件，只要调用useGlobalStore就能拿到状态和修改方法，跟用Zustand一样顺手：

import { useGlobalStore } from './GlobalStore';

function Header() {
  const { state, toggleTheme, setUser } = useGlobalStore();

  return (
    <header style={{ 
      background: state.theme === 'dark' ? '#333' : '#fff',
      color: state.theme === 'dark' ? '#fff' : '#333',
      padding: '1rem'
    }}>
      <p>当前主题：{state.theme}</p>
      <button onClick={toggleTheme} style={{ marginLeft: '1rem' }}>切换主题</button>
      <button 
        onClick={() => setUser({ name: 'Shuvo', email: 'shuvo@example.com' })}
        style={{ marginLeft: '1rem' }}
      >
        设置当前用户
      </button>
      {state.user && <p style={{ marginLeft: '1rem' }}>欢迎回来，{state.user.name}！</p>}
    </header>
  );
}

export default Header;

优化小技巧：避免不必要的重渲染 #

默认情况下，只要Context的value变化，所有用useGlobalStore的组件都会重渲染。可以这样优化：

• 拆分多个Context：比如把用户状态和主题状态拆成UserContext和ThemeContext，修改用户信息时，只有用到用户状态的组件才会重渲染，主题相关的不受影响。
• 精准缓存value：我们之前已经用useMemo缓存了actions和contextValue，这能有效减少无意义的重渲染。

这样一套下来，你就拥有了一个跟Redux Toolkit/Zustand体验接近的全局状态存储，完全基于React原生API，不用额外依赖任何库！

备注：内容来源于stack exchange，提问作者Shuvo