Question

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

到目前为止，名称有四个值。如果名称为"setUserData"，则data应该为IUserData（接口）。如果名称为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

有一种方法我只能告诉dispatchGlobal，而name会自动分配给正确的类型或其他更好的方法。请指导正确的路径。

Answer 1

将useReducer与typescript一起使用会有些棘手，因为正如您所提到的，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方法中，所以缩减器现在只有这么小：

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方法中（我认为）可以更好地扩展，因为您不会获得带有庞大转换条件的reducer。您也完全是类型安全的，因为输入参数的类型是由操作的构造函数定义的，而reducer可以简单地采用Action接口的任何实现。

使用React钩子和打字稿为动作对象创建接口的正确方法是什么

1 个答案: