如何使用 Redux Toolkit（使用 TypeScript）解决“AsyncThunkAction”类型中缺少“属性”类型？答案

【问题标题】：How do I resolve 'Property 'type' is missing in type 'AsyncThunkAction' using Redux Toolkit (with TypeScript)?如何使用 Redux Toolkit（使用 TypeScript）解决“AsyncThunkAction”类型中缺少“属性”类型？
【发布时间】：2020-09-26 00:25:32
【问题描述】：

我正在使用 Redux Toolkit 和下面的 thunk/slice。我认为我可以通过等待 thunk 承诺解决 using the example provided here 来在本地处理它们，而不是在状态中设置错误。

我想我可以避免这样做，也许我应该通过在状态中设置 error 来避免这样做，但我有点想了解我在哪里出错了。

Argument of type 'AsyncThunkAction<LoginResponse, LoginFormData, {}>' is not assignable to parameter of type 'Action<unknown>'.
  Property 'type' is missing in type 'AsyncThunkAction<LoginResponse, LoginFormData, {}>' but required in type 'Action<unknown>'

将resultAction传递给match时出现错误：

const onSubmit = async (data: LoginFormData) => {
  const resultAction =  await dispatch(performLocalLogin(data));
  if (performLocalLogin.fulfilled.match(resultAction)) {
    unwrapResult(resultAction)
  } else {
    // resultAction.payload is not available either
  }
};

重击：

export const performLocalLogin = createAsyncThunk(
  'auth/performLocalLogin',
  async (
    data: LoginFormData,
    { dispatch, requestId, getState, rejectWithValue, signal, extra }
  ) => {
    try {
      const res = await api.auth.login(data);
      const { token, rememberMe } = res;
      dispatch(fetchUser(token, rememberMe));
      return res;
    } catch (err) {
      const error: AxiosError<ApiErrorResponse> = err;
      if (!error || !error.response) {
        throw err;
      }
      return rejectWithValue(error.response.data);
    }
  }
);

切片：

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: { /* ... */ },
  extraReducers: builder => {
    builder.addCase(performLocalLogin.pending, (state, action) => startLoading(state));
    builder.addCase(performLocalLogin.rejected, (state, action) => {
      //...
    });
    builder.addCase(performLocalLogin.fulfilled, (state, action) => {
      if (action.payload) {
        state.rememberMe = action.payload.rememberMe;
        state.token = action.payload.token;
      }
    });
  }
})

感谢您的帮助！

【问题讨论】：

标签： reactjs typescript redux redux-thunk redux-toolkit

【解决方案1】：

很确定您使用的是标准的内置 Dispatch 类型，它对 thunk 一无所知。

根据 Redux 和 RTK 文档，您需要定义一个更具体的 AppDispatch 类型，该类型正确了解 thunk 并在此处声明 dispatch 是该类型，例如：

    // store.ts
    export type AppDispatch = typeof store.dispatch;

    // MyComponent.ts
    const dispatch : AppDispatch = useDispatch();

    const onSubmit = async () => {
        // now dispatch should recognize what the thunk actually returns
    }

【讨论】：

是的，就是这样。谢谢！
这也解决了我的问题，尽管它与.then 在dispatch 上不可用有关。我已经阅读了很多 RTK 和 Redux 文档，但我每次都错过了！
这是一个经常被引用的问题，因此我们显然需要更新文档以进一步突出它。
我在将dispatch 声明为AppDispatch 后仍然看到类型错误，因为我使用扩展运算符定义了商店的middleware 选项。如文件所述，使用getDefaultMiddleware().concat(...) 来修复它。
@markerikson FWIW，cmets 对我来说非常清楚。我只是碰巧在那种情况下错过了它并且没有认出它。

【解决方案2】：

我必须将 middleware: [thunk as ThunkMiddleware] 添加到我的 configureStore() 以获得 createAsyncThunk() 的正确类型

【讨论】：