zustand-redux-extends-type 中文文档教程

Question

zustand-redux-extends-type

与 zustand 的 redux 中间件。安装：

npm add zustand-redux-extends-type -D # or yarn add zustand-redux-extends-type -D

利用如下所示的类型（ReduxExtends 和 FeatureEventActions）消除了在化简器中使用任何类型断言的需要。当输入 dispatch 时，它还强制只强制属性的有效值。

import type { ReduxExtends } from "zustand-redux-extends-type";

type FeatureEventActions = {
  grumpiness: {
    increase: number;
    decrease: number;
    reset: undefined;
  };
  happiness: {
    "show all": User[];
    level: "low" | "sort of" | "high";
  };
};

const useGrumpyStore = create(
  redux(
    (
      state: { count: number; level: "low" | "sort of" | "high" },
      { type, payload }: ReduxExtends<FeatureEventActions>
    ) => {
      switch (type) {
        case "grumpiness/increase":
          return { ...state, count: state.count + payload };
        case "grumpiness/decrease":
          return { ...state, count: state.count - payload };
        case "grumpiness/reset":
          return { ...state, count: 0 };
        //removed happiness cases for brevity
        default:
          return state;
      }
    },
    { count: 0, level: "high" }
  )
);

const dispatch = useGrumpyStore((state) => state.dispatch);
dispatch({ type: "grumpiness/decrease", payload: 1 });

此地图类型 FeatureEventActions 的结构以 Redux 对操作的建议：

“类型字段应该是可读字符串，通常写为 'feature/eventName'”

对于本例，'grumpiness' 和“happiness”是事件名称分别为“increase”和“show all”的特征。每个事件名称都根据其有效负载类型键入。 ReduxExtends 的任何 action 对象，无论是作为 reducer 或 dispatch 的参数，都有其 type 属性限制为 TypeScript 将解析的内容。这也将决定有效负载类型。