reactjs - '(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

我最初可以想到几种不同的方法，您可以考虑解决此问题，具体取决于您要投入多少精力，您想要的原版实现有多真实，以及您想要的打字有多准确。

最简单的实现和最真实的 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'))

一个简单的实现，但需要输入每个调用(并且仍然输入很差):

// 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)

此项目符号特定于 Redux Toolkit，但可以轻松应用于大多数第三方库(例如 Redux)的 TypeScript 键入问题。在使用 redux-toolkit 的情况下，可以创建对 configureStore 的任何一个的引用或 createSlice并根据您的选择操纵打字。在下面的代码中，我将 createSlice 函数包装在 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()

第三个例子的代码可以在 here on Github 找到。 .