React使用useReducer时跨组件显示初始值、状态不共享如何解决？

问题根源 #

你在Home和About两个组件里分别独立调用了useReducer，每个调用都会生成独立的状态实例，彼此完全隔离，所以在A页面修改的状态当然不会同步到B页面，两个页面的状态从根上就是分开的。

解决方案：结合Context实现全局状态共享 #

把useReducer的状态和dispatch方法放到公共的Context中，再用Context Provider包裹整个应用的路由层，这样所有页面组件都能消费同一个全局状态，完全符合你用useReducer维护全局loginFlag的需求。

步骤1：创建全局Context和Provider组件 #

新建src/context/GlobalContext.js文件，代码如下：

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

// 初始化状态，可直接添加你需要的loginFlag字段
const initialState = {
  count: 0,
  loginFlag: false
};

// 你的reducer逻辑
const reducer = (state, action) => {
  switch (action.type) {
    case 'count':
      return { ...state, count: state.count + 1 };
    case 'toggleLogin':
      return { ...state, loginFlag: !state.loginFlag };
    default:
      return state;
  }
};

// 创建Context容器
const GlobalContext = createContext();

// 封装Provider组件，用来包裹整个应用
export function GlobalProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <GlobalContext.Provider value={{ state, dispatch }}>
      {children}
    </GlobalContext.Provider>
  );
}

// 封装自定义Hook，简化组件消费Context的代码
export function useGlobalState() {
  return useContext(GlobalContext);
}

步骤2：入口文件用Provider包裹全部路由 #

修改App.js或项目入口文件，把所有路由组件都套在GlobalProvider内部：

import { GlobalProvider } from './context/GlobalContext';
import Home from './pages/Home';
import About from './pages/About';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <GlobalProvider>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
    </GlobalProvider>
  );
}

export default App;

步骤3：页面组件消费全局状态 #

两个页面不要再单独调用useReducer，直接用封装好的useGlobalState获取全局状态和dispatch方法即可：

组件A（Home）修改后：

import { useGlobalState } from '../context/GlobalContext';

const Home = () => {
  const { state, dispatch } = useGlobalState();
  console.log("state in home", state);
  return (
    <div>
      <button onClick={() => dispatch({ type: "count" })}>Count</button>
      <button onClick={() => dispatch({ type: "toggleLogin" })}>切换登录状态</button>
    </div>
  );
};

组件B（About）修改后：

import { useGlobalState } from '../context/GlobalContext';

const About = () => {
  const { state } = useGlobalState();
  console.log("state in about", state);
  return (
    <div>
      About page
      <p>当前count值：{state.count}</p>
      <p>登录状态：{state.loginFlag ? '已登录' : '未登录'}</p>
    </div>
  );
};

修改完成后，任意页面修改全局状态，所有组件都能同步拿到最新值。

如果是复杂度较高的大型项目，也可以直接使用Redux、Zustand等第三方状态管理库，全局状态共享的实现逻辑本质一致。

内容的提问来源于stack exchange，提问作者krsna