react18 useReducer 可以不同组件共享数据吗

是的，useReducer 可以实现不同组件之间的数据共享。通常，我们会结合 React.createContext 和 useContext 钩子来实现这一功能。以下是具体步骤：

1. 创建上下文

在项目的共享模块中，使用 React.createContext 创建一个上下文对象：

import { createContext } from 'react';

const MyContext = createContext();

export default MyContext;

2. 定义 Reducer

创建一个 reducer 函数，用于处理状态更新逻辑：

const initialState = {
  count: 0,
};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export { initialState, reducer };

3. 提供共享状态

在顶层组件（如 App 组件）中，使用 useReducer 管理状态，并通过 MyContext.Provider 将状态和 dispatch 函数传递给子组件：

import React, { useReducer } from 'react';
import MyContext from './MyContext';
import { initialState, reducer } from './reducer';

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {/* 子组件 */}
      <ChildComponent1 />
      <ChildComponent2 />
    </MyContext.Provider>
  );
}

export default App;

4. 在子组件中消费共享数据

子组件通过 useContext 钩子获取共享的状态和 dispatch 函数：

import React, { useContext } from 'react';
import MyContext from './MyContext';

function ChildComponent1() {
  const { state, dispatch } = useContext(MyContext);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

export default ChildComponent1;

总结

通过以上步骤，不同组件可以通过 useReducer 和 Context 实现数据共享：

• 顶层组件使用 useReducer 管理共享状态，并通过 Context.Provider 提供状态和 dispatch 函数。
• 子组件通过 useContext 获取共享的状态和 dispatch 函数，实现状态访问和更新。

这种方法避免了逐级传递 props 的麻烦，使组件之间的通信更加简洁高效。