reactjs - Redux Toolkit（TypeScript使用）で 'AsyncThunkAction' 型に 'type' プロパティが欠けているというエラーをどのように解決しますか？

私は以下のサンク/スライスと一緒に Redux Toolkit を使用しています。エラーを状態に設定するのではなく、ここで提供された例を使用して、サンクのプロミスが解決されるのを待つことで、それらをローカルで処理できると考えています。

おそらく、状態に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;
      }
    });
  }
})

どんな助けでもありがとうございます！

回答 #1

おそらく、そこで標準の組み込みの Dispatch 型を使用していると思いますが、それはサンクスについては何も知りません。

Redux と RTK のドキュメントによると、スロットについて正しく認識するより具体的な AppDispatch タイプを定義し、ここでの 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
    }

回答 #2

正しい型を createAsyncThunk() で取得するために、configureStore() に middleware: [thunk as ThunkMiddleware] を追加する必要がありました