使用 react hooks 和 typescript 为 action 对象创建接口的正确方法是什么

Question

我正在使用 React 钩子和打字稿。 我使用useReducer()作为全局状态。 reducer 函数的 action 包含两个属性name和data 。 name表示事件或更改的名称， data将是该特定名称所需的特定数据。

到目前为止，名称有四个值。 如果名称为"setUserData"则data应为IUserData （接口）。 如果 name 是setDialog那么data应该是DialogNames （包含两个字符串的类型）。 如果是其他东西，则不需要数据。

//different names of dialog.
export type DialogNames = "RegisterFormDialog" | "LoginFormDialog" | "";

//type for name property in action object
type GlobalStateActionNames =
   | "startLoading"
   | "stopLoading"
   | "setUserData"
   | "setDialog";

//interface for main global state object.
export interface IGlobalState {
   loading: boolean;
   userData: IUserData;
   dialog: DialogNames;
}

interface IUserData {
   loggedIn: boolean;
   name: string;
}
//The initial global state
export const initialGlobalState: IGlobalState = {
   loading: false,
   userData: { loggedIn: false, name: "" },
   dialog: ""
};

//The reducer function which is used in `App` component.
export const GlobalStateReducer = (
   state: IGlobalState,
   { name, data }: IGlobalStateAction
): IGlobalState => {
   switch (name) {
      case "startLoading":
         return { ...state, loading: true };
      case "stopLoading":
         return { ...state, loading: false };
      case "setUserData":
         return { ...state, userData: { ...state.userData, ...data } };
      case "setDialog":
         return { ...state, dialog: data };
      default:
         return state;
   }
};

//The interface object which is passed from GlobalContext.Provider as "value"
export interface GlobalContextState {
   globalState: IGlobalState;
   dispatchGlobal: React.Dispatch<IGlobalStateAction<GlobalStateActionNames>>;
}

//intital state which is passed to `createContext`
export const initialGlobalContextState: GlobalContextState = {
   globalState: initialGlobalState,
   dispatchGlobal: function(){}
};

//The main function which set the type of data based on the generic type passed.
export interface IGlobalStateAction<
   N extends GlobalStateActionNames = GlobalStateActionNames
> {
   data?: N extends "setUserData"
      ? IUserData
      : N extends "setDialog"
      ? DialogNames
      : any;
   name: N;
}

export const GlobalContext = React.createContext(initialGlobalContextState);

我的<App>组件看起来像。

const App: React.SFC = () => {
   const [globalState, dispatch] = React.useReducer(
      GlobalStateReducer,
      initialGlobalState
   );


   return (
      <GlobalContext.Provider
         value={{
            globalState,
            dispatchGlobal: dispatch
         }}
      >
         <Child></Child>
      </GlobalContext.Provider>
   );
};

上面的方法没问题。 我必须像下面那样在<Child>使用它

dispatchGlobal({
   name: "setUserData",
   data: { loggedIn: false }
} as IGlobalStateAction<"setUserData">);

上述方法的问题在于它使代码更长一些。 第二个问题是我必须IGlobalStateAction地导入IGlobalStateAction在哪里我必须使用dispatchGlobal

有没有办法让我只能告诉name和data被自动分配给正确的类型或任何其他更好的方式。 请引导到正确的路径。

Answer 1

将useReducer与useReducer一起使用有点棘手，因为正如您所提到的，reducer 的参数因您采取的操作而异。

我想出了一种模式，您可以在其中使用类来实现您的操作。 这允许您将类型安全参数传递到类的构造函数中，并且仍然使用类的超类作为 reducer 参数的类型。 听起来可能比它更复杂，这里有一个例子：

interface Action<StateType> {
  execute(state: StateType): StateType;
}

// Your global state
type MyState = {
  loading: boolean;
  message: string;
};

class SetLoadingAction implements Action<MyState> {
  // this is where you define the parameter types of the action
  constructor(private loading: boolean) {}
  execute(currentState: MyState) {
    return {
      ...currentState,
      // this is how you use the parameters
      loading: this.loading
    };
  }
}

因为状态更新逻辑现在被封装到类的execute方法中，所以reducer现在只有这么小：

const myStateReducer = (state: MyState, action: Action<MyState>) => action.execute(state);

使用此减速器的组件可能如下所示：

const Test: FunctionComponent = () => {
  const [state, dispatch] = useReducer(myStateReducer, initialState);

  return (
    <div>
      Loading: {state.loading}
      <button onClick={() => dispatch(new SetLoadingAction(true))}>Set Loading to true</button>
      <button onClick={() => dispatch(new SetLoadingAction(false))}>Set Loading to false</button>
    </div>
  );
}

如果您使用这种模式，您的操作会将状态更新逻辑封装在它们的 execute 方法中，（在我看来）可以更好地扩展，因为您没有得到带有巨大 switch-case 的 reducer。 您也是完全类型安全的，因为输入参数的类型由操作的构造函数定义，并且reducer 可以简单地采用Action接口的任何实现。