TypeScript -如何将react上下文与分派操作拆分？

import React, { createContext, useContext, useReducer } from "react";

// 创建上下文
const MyContext = createContext<any>(null);

// 创建Reducer
const reducer = (state: any, action: any) => {
  switch (action.type) {
    case "UPDATE":
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

// 创建Provider组件
export const MyProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, { data: {} });

  // 提供分派操作给消费组件
  const updateData = (data: any) => {
    dispatch({ type: "UPDATE", payload: data });
  };

  // 将state和分派操作传递给消费组件
  return (
    <MyContext.Provider value={{ state, updateData }}>
      {children}
    </MyContext.Provider>
  );
};

// 创建自定义Hook，方便在消费组件中使用上下文
export const useMyContext = () => useContext(MyContext);

import React from "react";
import { MyProvider } from "./MyContext";
import ComponentA from "./ComponentA";

const App: React.FC = () => {
  return (
    <MyProvider>
      <ComponentA />
    </MyProvider>
  );
};

export default App;

import React from "react";
import { useMyContext } from "./MyContext";

const ComponentA: React.FC = () => {
  const { state, updateData } = useMyContext();

  const handleClick = () => {
    // 分派操作更新数据
    updateData({ foo: "bar" });
  };

  return (
    <div>
      <p>Data: {JSON.stringify(state)}</p>
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ComponentA;