将 AsyncThunkAction 传递给 unwrapResult

Question

我正在学习 Redux Essentials 教程，但在第 5 部分Async Logic and Data Fetching 中遇到了一个问题。尽管本教程中未使用 TypeScript，但我仍在使用 TypeScript，因为我正在尝试同时学习 Redux 和 TypeScript。

在Checking Thunk Results in Components一节中，我在调用 Redux 的unwrapResult函数时遇到了一个我无法弄清楚的类型错误。

这是错误：

TypeScript error in redux-essentials-example-app/src/features/posts/AddPostForm.tsx(34,22):
Argument of type 'AsyncThunkAction<Post, InitialPost, {}>' is not assignable to parameter of type 'ActionTypesWithOptionalErrorAction'.
  Property 'payload' is missing in type 'AsyncThunkAction<Post, InitialPost, {}>' but required in type '{ error?: undefined; payload: any; }'.  TS2345

    32 |         setAddRequestStatus("pending");
    33 |         const result = await dispatch(addNewPost({ title, content, user: userId }));
  > 34 |         unwrapResult(result);
       |                      ^
    35 |         setTitle("");
    36 |         setContent("");
    37 |         setUserId("");

以下是我键入的 AddPostForm.tsx 版本的完整内容：

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { unwrapResult } from "@reduxjs/toolkit";

import { RootState } from "../../app/store";
import { addNewPost } from "./postsSlice";

export default function AddPostForm() {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [userId, setUserId] = useState("");
  const [addRequestStatus, setAddRequestStatus] = useState("idle");

  const dispatch = useDispatch();
  const users = useSelector((state: RootState) => state.users);

  const onTitleChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(e.target.value);
  };
  const onContentChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setContent(e.target.value);
  };
  const onAuthorChanged = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setUserId(e.target.value);
  };

  const canSave = [title, content, userId].every(Boolean) && addRequestStatus === "idle";

  const onSavePostClicked = async () => {
    if (canSave) {
      try {
        setAddRequestStatus("pending");
        const result = await dispatch(addNewPost({ title, content, user: userId }));
        unwrapResult(result);
        setTitle("");
        setContent("");
        setUserId("");
      } catch (err) {
        console.error("Failed to save the post: ", err);
      } finally {
        setAddRequestStatus("idle");
      }
    }
  };

  const usersOptions = users.map(user => (
    <option key={user.id} value={user.id}>
      {user.name}
    </option>
  ));

  return (
    <section>
      <h2>Add a new post</h2>
      <form>
        <label htmlFor="postTitle">Post Title:</label>
        <input type="text" id="postTitle" name="postTitle" value={title} onChange={onTitleChanged} />
        <label htmlFor="postAuthor">Author:</label>
        <select id="postAuthor" value={userId} onChange={onAuthorChanged}>
          <option value=""></option>
          {usersOptions}
        </select>
        <label htmlFor="postContent">Content:</label>
        <textarea id="postContent" name="postContent" value={content} onChange={onContentChanged} />
        <button type="button" onClick={onSavePostClicked} disabled={!canSave}>Save post</button>
      </form>
    </section>
  );
}

这是我的 redux-essentials-example-app/src/features/posts/postsSlice.tsx 键入版本的完整内容：

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

import { RootState } from "../../app/store";
import { client } from "../../api/client";

export interface PostState {
  posts: Post[],
  status: "idle" | "loading" | "succeeded" | "failed",
  error: string | null,
}

export interface Post {
  id: string,
  date: string,
  title: string,
  content: string,
  user: string,
  reactions: Reactions,
}

export interface Reactions {
  thumbsUp: number,
  hooray: number,
  heart: number,
  rocket: number,
  eyes: number,
  [key: string]: number,
}

const initialState: PostState = {
  posts: [],
  status: "idle",
  error: null,
};

export const fetchPosts = createAsyncThunk("posts/fetchPosts", async () => {
  const response = await client.get("/fakeApi/posts");
  return response.posts;
});

interface InitialPost {
  title: string,
  content: string,
  user: string,
}

export const addNewPost = createAsyncThunk<Post, InitialPost>(
  "posts/addNewPost",
  async (initialPost) => {
    const response = await client.post("/fakeApi/posts", { post: initialPost });
    return response.post;
  }
);

const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {
    postUpdated: (state, action) => {
      const { id, title, content } = action.payload;
      const existingPost = state.posts.find(post => post.id === id);

      if (existingPost) {
        existingPost.title = title;
        existingPost.content = content;
      }
    },
    reactionAdded: (state, action) => {
      const { postId, reaction } = action.payload;
      const existingPost = state.posts.find((post: Post) => post.id === postId);
      if (existingPost) {
        existingPost.reactions[reaction]++;
      }
    },
  },
  extraReducers: builder => {
    builder.addCase(fetchPosts.pending, (state) => {
      state.status = "loading";
    });
    builder.addCase(fetchPosts.fulfilled, (state, action) => {
      state.status = "succeeded";
      state.posts = state.posts.concat(action.payload);
    });
    builder.addCase(fetchPosts.rejected, (state, action) => {
      state.status = "failed";
      if (action.error.message) {
        state.error = action.error.message;
      }
    });
    builder.addCase(addNewPost.fulfilled, (state, action) => {
      state.posts.push(action.payload);
    });
  },
});

export const { postUpdated, reactionAdded } = postsSlice.actions;

export function selectAllPosts(state: RootState) {
  return state.posts.posts;
}

export function selectPostById(state: RootState, postId: string) {
  return state.posts.posts.find((post: Post) => post.id === postId);
}

export default postsSlice.reducer;

我查看了Redux Toolkit的源码，ActionTypesWithOptionalErrorAction类型没有导出，所以好像传递给的对象unwrapResult需要是某种shape而不是声明为某种类型。类型错误表示该payload属性丢失，但如果我注释掉unwrapResult调用并使用console.log(result). 因此，这似乎是使类型正确的问题，而不是代码中的逻辑错误。我如何正确输入？

Answer 1

我想到了。useDispatch从react-redux调用时需要指定“dispatch”类型。这在TypeScript 的使用：获取Dispatch类型中进行了描述。

最后，我将这些额外类型添加到创建 Redux 存储的文件中：

export type AppDispatch = typeof store.dispatch;

export function useAppDispatch() {
  return useDispatch<AppDispatch>();
}

然后在 src/features/posts/AddPostForm.tsx 中，我导入useAppDispatch并useDispatch使用它。

Answer 2

我刚刚在尝试解决同样的问题时遇到了这个问题。我没有创建一个useAppDispatch()函数来摆弄类型，而是意识到我的configureMiddleware 存储是 \xe2\x80\x99t ，包括 thunk 类型作为调度操作。

\n

在此页面上，他们说使用中间件定义的回调将包括正确的键入。我一直在使用的地方：

\n

const store = configureStore({\n  reducer: rootReducer,\n  middleware: [\xe2\x80\xa6getDefaultMiddleware(), logger]\n})\n

\n

将其更改为

\n

const store = configureStore({\n  reducer: rootReducer,\n  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)\n})\n

\n

实际上解决了问题，因为store.dispatch()现在将其包含AsyncThunkAction在可接受的参数类型列表中。这是一个更好的解决方案，但我希望它包含在有关configureStore.

\n