知识点记录：基于zustand封装useCommon实现简单轻量化的store

在日常开发中，使用到了zustand，感觉非常好用的同时，想自己基于zustand写一个hook来封装维护一个全局的state，实现所有页面实时共享这个state达到类似于store的功能，为了方便使用，不断优化了这个hook，这里记录一下便于后续的项目开发cv。

以下是实现代码：

import React, { useState, useEffect } from "react";
import { create } from "zustand";

// 存取全局state 模拟store
export const useCommonData = create((set) => ({
  setCommonData: (newData) =>
    set((state) => {
      const targetKey = Object.keys(newData)?.[0];
      const newState = {
        ...state,
        ...(targetKey ? { [targetKey]: newData[targetKey] } : {}),
      };
      return newState;
    }),
  isSomeKey: (targetKey) =>
    targetKey
      ? Object.keys(useCommonData.getState()).includes(targetKey)
      : !!targetKey,
}));

// 优化useCommonData，便于store的使用
// 使用方法： const [state,setState] = useCommon('targeKey',{ value:'初始值' })
export const useCommon = (key, initData) => {
  const [setCommonData, isSomeKey] = useCommonData((state) => [
    state.setCommonData,
    state.isSomeKey,
  ]);

  const setData = (newData) => {
    setCommonData({ [key]: newData });
  };

  React.useEffect(() => {
    if (!isSomeKey(key)) setData(initData);
  }, []);

  return [isSomeKey(key) ? useCommonData.getState()?.[key] : initData, setData];
};