React - 无法发送带有额外参数的 redux-thunk 操作

Question

我正在尝试使用带有 redux-thunk 和 redux 的打字稿。我想将一个对象传递给任何操作（我正在使用依赖注入，我需要传递一个对象服务或字符串）

我遇到了这个错误；

  Overload 1 of 2, '(action: AnyAction): AnyAction', gave the following error.
    Argument of type '(dispatch: any, getState: AppState, extraArg: string) => Promise<any>' is not assignable to parameter of type 'AnyAction'.

完成如下：

store.ts:

const middlewares = [
    routerMiddleware(history),
    thunkMiddleware.withExtraArgument('bar') as ThunkMiddleware<
      AppState,
      Actions,
      string
    >
  ];
  const middleWareEnhancer = applyMiddleware(...middlewares);

  const store = createStore(
    rootReducer(history),
    preloadState,
    composeWithDevTools(middleWareEnhancer)
  );

我的 index.ts 我要发送操作的地方是 :

(store.dispatch as ThunkDispatch<{}, void, AnyAction>)(getAll());

我的动作文件有效：

export const getall = () => async (dispatch: any) => {
  try {
    dispatch({ type: GETALL_REQUEST });
    return dispatch({ type: GETALL_SUCCESS, payload: null });
  } catch (e) {
    return dispatch({ type: GETALL_FAILURE, error: e });
  }
};

引发错误的我的操作（放一部分）

export const getAll = () => async (
  dispatch: any,
  getState: AppState,
  extraArg: string
) => {....action logic}

然后我得到错误：

(store.dispatch as ThunkDispatch<{}, void, AnyAction>)(getAll());

Answer 1

更正错误的最简单方法：

(store.dispatch as ThunkDispatch<AppState, string, AnyAction>)(getAll());

和

export const getAll = () => async (
  dispatch: any,
  getState: () => AppState,
  extraArg: string
) => {....action logic}

ThunkDispatch 接受以下类型参数：S - 状态，E - 扩展参数，A - 动作。所以你对 ThunkDispatch 的使用应该匹配你的状态和扩展参数的类型。
Thunk action 是一个接受以下参数的函数：dispatch 是一个函数，getState 也是一个 returns 状态和 extraArg.所以请确保 getState 是一个函数。

为了避免 dispatch 转换，我建议在创建时正确输入商店。当您使用接受数组的 applyMiddleware 时，您应该将类型参数传递给它。它接受将在应用特拉华州后使用的调度类型。

const middlewares = [thunk.withExtraArgument("bar")];
const middleWareEnhancer = applyMiddleware<
  ThunkDispatch<AppState, string, Actions>
>(...middlewares);

因此，您将获得一个具有正确类型的调度功能的商店。而且您无需转换即可使用它。

store.dispatch(getAll());

正在工作demo

React - 无法发送带有额外参数的 redux-thunk 操作

React - could not send a redux-thunk action with extra argument

typescript

reactjs

redux

redux-thunk