'(dispatch: Dispatch) => void' 类型的参数不可分配给 'AnyAction' 类型的参数

Question

错误本身：

(alias) deleteCategory(id: number): (dispatch: Dispatch<AnyAction>) => void
import deleteCategory
Argument of type '(dispatch: Dispatch) => void' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type '(dispatch: Dispatch) => void' but required in type 'AnyAction'.ts(2345)

有问题的代码：

export function getCategoryList(
  categories: CategoryType[],
  dispatch: Dispatch
) {
  return categories.map((category: CategoryType) => ({
    ...category,
    onDelete: () => {
      dispatch(deleteCategory(category._id)); //FIXME: Fix this. Error Appears here
    },
  }));
}

deleteCategory 的实现：

export const deleteCategory = (id: number) => (dispatch: Dispatch) => {
  deleteCategoryAPI(id)
    .then(() => {
      dispatch({
        type: DELETE_CATEGORY,
        category: id,
      });
    })
    .catch((error) => console.error(error));
};

deleteCategoryAPI 的实现：

export async function addCategoryAPI(category: CategoryType) {
  return fetch(`${API_URL}/categories`, {
    method: "POST",
    body: JSON.stringify(category),
    headers: { "Content-Type": "application/json; charset=UTF-8" },
  }).then((response) => response.json());
}

我在这里使用有问题的代码：

const categoryList = getCategoryList(categoryState, dispatch);
...
return (
    <List
      dataSource={categoryList}
      renderItem={({ name, onDelete }) => (
        <List.Item>
          <CategoryItem name={name} onDelete={onDelete} />
        </List.Item>
      )}
    />
  );

function CategoryItem({ name, onDelete }: categoryItemPropsType) {

export type categoryItemPropsType = {
  name: string;
  onDelete: () => void;
};

可能是什么问题？ 为此花了几个小时。 有趣的是，当我在功能组件的其他地方调用dispatch(deleteCategory(category._id))时，它可以正常工作。非常感谢！

Answer 1

我最初可以考虑几种不同的方法，这取决于你想投入多少精力，你想要的原版实现有多真实，以及你想要的打字有多准确。

1. 最简单的实现和最真实的 API（但打字很差）：

    // create your own dispatch function reference with custom typings export const dispatchStore = store.dispatch as typeof store.dispatch | Dispatch<any> // use custom typed dispatch (unfortunately, you can pass it almost `any`thing) dispatchStore(myThunk('id123'))

2. 一个简单的实现，但需要输入每个调用（并且仍然输入很差）：

    // optional export const dispatchStore = store.dispatch // type each dispatch as any (not good if you need to use 'abort', etc) dispatchStore(myThunk('id123') as any)

3. 此项目符号特定于 Redux 工具包，但可以轻松应用于大多数 TypeScript 与第三方库（例如 Redux）的键入问题。 在使用redux-toolkit的情况下，可以创建对configureStore或createSlice的引用，并根据您的选择操作类型。 在下面的代码中，我将 createSlice function 包装在createSlicePlus中，在后台添加了一堆便利逻辑，并增强了 args 和 return 类型。

    // convenience `request` wrapper around store `dispatch` that abstracts the rest const promise = counter.request.decrementThunk(500) // even the RTK thunk promise is typed appropriately promise.abort()

第三个示例的代码可以在 Github 上找到。