老师您好。学到 context 全局上下文的知识点时，发现每次更新全局状态有些步骤是相同的，比如：先将全局状态解构出来，再将需要更新的对象解构出来。我就在想是否能封一个函数，将最后赋值的操作提取出来。这个函数就是将最后更新完成后的全局状态返回出来，因为每个组件的渲染 UI 逻辑不同，因此接收两个入参：1. 全局状态state，2. 要更新的属性以及对应的属性值，最后返回更新过后的全局状态。我自己试着写了一下，发现可以正常运行。我的问题是：这种方式是否可取以及是否有更好的写法？ (下一章自定义 Hook 应该就是对这部分进行优化吧。但是我还没看)。下面放一下代码，烦请老师看一下。

全局状态组件 (与老师在课程中写的别无二致)

import React, { useState } from 'react';

// 接口类型
export interface defaultStateInterface {
  username: string;
  randomNum: number;
};

// 全局状态 context 的 state 值
const defaultState: defaultStateInterface = {
  username: 'blackpink',
  randomNum: 0
};

// 全局状态的 context 对象
export const appStateContext = React.createContext<defaultStateInterface>(defaultState);

// 更新全局状态对象的 context 对象
export const setAppStateContext = React.createContext<React.Dispatch<React.SetStateAction<defaultStateInterface>> | null>(null);

export const AppState: React.FC = (props) => {
  const [state, setState] = useState(defaultState);

  return (
    <appStateContext.Provider value={state}>
      <setAppStateContext.Provider value={setState}>
        {props.children}
      </setAppStateContext.Provider>
    </appStateContext.Provider>
  );
};

自己封装的更新全局状态的函数

import { defaultStateInterface } from './AppState';

const setAppState = (state: defaultStateInterface, changeState: any) => {
  let obj = {
    ...state
  };

  for (let [key, value] of Object.entries(changeState)) {
    obj = {
      ...state,
      [key]: value
    };
  };
  return obj;
};

export { setAppState };

组件中的更新状态 (与老师在课程中的写法有一小点区别)

const setState = useContext(setAppStateContext);

  const handleClick = () => {
    if (setState) {
      setState(state => {
        const newState = setAppState(state, {
          randomNum: state.randomNum + 1
        });
        
        console.log(newState);
        return newState;
      });
    };
  };