redux 中自定义中间件的调度类型

Question

我正在使用 redux 工具包，并使用从中间件（下面的代码）调用的 createAsyncThunk 创建了一个 thunk。什么是正确的调度类型？现在它只有在我指定“任何”时才有效。


import { Action, Dispatch } from "redux";
import { updateTerm } from "../slices/explore";

const middleWare = ({ dispatch }: { dispatch: Dispatch<Action> }) => {
  return (next: (action: Action) => void) => {
    return (action: Action) => {
      next(action);
      if (updateTerm.match(action)) {       
          dispatch<any>(getShows(action.payload)); 
      }
    };
  };
};

const getShows = createAsyncThunk<
  Show[],
  string,
  { rejectValue: SearchError }
>("explore/getShows", async (term: string, { rejectWithValue }) => {
 //do async stuff
});

Answer 1

简短的回答是您需要使用 redux-thunk 库中的 ThunkDispatch 类型。

理想情况下，您根本不会引用它，而是使用[AppDispatchtype inferred fromstore.dispatch](https://redux.js.org/tutorials/typescript-quick-start#define-root-state-and-dispatch-types). However, because this is a middleware, and middleware themselves alter the type of store.dispatch`，你最终会遇到循环类型定义问题。

话虽如此，我实际上建议不要在这里编写自定义中间件，尤其是对于仅调度一个操作的情况。

相反，我建议使用 the new "listener middleware" that will be out in the next version of Redux Toolkit。它目前作为独立的 @rtk-incubator/action-listener-middleware 软件包提供。

redux 中自定义中间件的调度类型

Dispatch type for custom middleware in redux

typescript

redux

redux-thunk

redux-toolkit