React context reducer结合使用

React Context 结合 Reducer 可以实现状态管理和状态更新的功能。Reducer 是一个纯函数，接收当前的状态和一个 action，返回一个新的状态。通过 Context 和 Reducer 的结合使用，可以将状态和状态更新逻辑分离到不同的文件中，使得组件的代码更加简洁和清晰。

下面是一个示例代码：

// 创建一个 context 对象
const MyContext = React.createContext();

// 定义 reducer 函数
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

// 父组件
function ParentComponent() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  // 将 reducer 的 dispatch 函数作为属性传递给子组件
  return (
    <MyContext.Provider value={{ state, dispatch }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件
function ChildComponent() {
  // 使用 useContext 钩子获取父组件提供的 context 对象
  const { state, dispatch } = useContext(MyContext);

  return (
    <div>
      <p>当前的计数：{state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>增加</button>
      <button onClick={() => dispatch({ type: "decrement" })}>减少</button>
    </div>
  );
}

在上面的代码中，父组件中使用 `useReducer` 钩子创建了一个状态以及一个 dispatch 函数。将状态和 dispatch 函数通过 Context 提供给子组件。在子组件中，通过 `useContext` 钩子获取父组件提供的 state 和 dispatch 对象。当用户点击子组件中的增加或减少按钮时，会调用 dispatch 函数并传入对应的 action 对象，从而触发状态更新，更新后的状态会自动传递给所有使用了该 Context 的组件，实现了状态的管理和更新。