zustand-utils/es/createStoreUpdater.js

some utils for zustand

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import isEqual from 'fast-deep-equal';
import { useEffect } from 'react';

/**
 * 该函数接收四个参数：key，value 、 deps setStoreState
 * @param {key}：需要更新的 Store 中的 key
 *  @param  value：需要更新的值
 *  @param  deps：依赖项数组，默认为 [value]
 *  @param  setStoreState：一个可选的回调函数，用于更新 Store 状态
 */

// 定义一个函数，用于创建 Store 更新器
export var createStoreUpdater = function createStoreUpdater(storeApi) {
  return function (key, value) {
    var deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [value];
    var setStateFn = arguments.length > 3 ? arguments[3] : undefined;
    // 获取 Store 更新函数
    var setState = setStateFn !== null && setStateFn !== void 0 ? setStateFn : storeApi.setState;
    // 使用 useEffect 监听依赖项变化
    useEffect(function () {
      // 如果 value 不为 undefined，就更新 Store 中的指定 key 的值
      if (typeof value !== 'undefined') {
        var _storeApi$getState;
        var state = (_storeApi$getState = storeApi.getState) === null || _storeApi$getState === void 0 ? void 0 : _storeApi$getState.call(storeApi);
        if (isEqual(state === null || state === void 0 ? void 0 : state[key], value)) return;

        // @ts-ignore
        setState(_defineProperty({}, key, value), false, {
          type: "\uD83D\uDCAD useStoreUpdater / ".concat(key.toString()),
          payload: value
        });
      }
    }, deps);
  };
};