调度 typescript 问题

eyh26e7m  于 2023-03-13  发布在  TypeScript
关注(0)|答案(1)|浏览(202)

我尝试发送此派单,但它给我此错误(我的所有其他派单也有相同的问题):
类型的参数(调度:调度)=〉承诺“不能分配给”活动“类型的参数

useEffect(() => {
    dispatch(getTodos(findError));
  }, []);

这将是我的操作,在该操作中执行调度:

type Error = (err: null | string) => void

export const getTodos = (findError: Error) => {
  return async (dispatch: Dispatch<Action>): Promise<Action> => {
    try {
      findError(null);
      const response = await axios(`...`);
      const result: TodoItem[] = response.data;

      return dispatch({
        type: ActionTypes.GET_TODOS,
        payload: result,
      });
    } catch (error) {
      findError("Ha ocurrido un error al cargar las tareas");
      console.log(error);
    }
  };
};

这个Action对象会出现在我所有的代码中

import { TodoItem } from "types/interfaces/interfaces.actions";
import { ActionTypes } from "redux/actions-types";

export interface GetTodos {
  type: ActionTypes.GET_TODOS;
  payload: TodoItem[];
}

export interface DeleteTodo {
  type: ActionTypes.DELETE_TODO;
  payload: number | string;
}

export interface PutTodo{
  type: ActionTypes.PUT_TODO,
  payload: PutTodoData
}

interface PutTodoData {
  id: number | string;
  checked: boolean;
}

export interface PostTodo{
  type: ActionTypes.POST_TODO,
  payload: TodoItem
}

export interface OrderTodo{
  type: ActionTypes.ORDER_TODO,
  payload: TodoItem[]
}

export type Action = GetTodos | DeleteTodo | PutTodo | PostTodo | OrderTodo;

我真的不知道它可能是什么,我尝试了所有的方法,为了调度我也使用useAppDispatch。而且它实现得很好。

5vf7fwbs

5vf7fwbs1#

这里的问题是,action函数的return语句中的Dispatch类型与useEffect钩子中使用的Dispatch类型不兼容。
解决这个问题的一种方法是在action函数中指定redux-thunk库中的ThunkDispatch类型:

import { ThunkDispatch } from 'redux-thunk';
    import { Action } from './your-actions-file';

    export const getTodos = (findError: Error) => {
        return async (dispatch: ThunkDispatch<any, any, Action>): Promise<Action> => {
            // ...
        }
    }

ThunkDispatch类型扩展了Dispatch并为thunk操作类型提供了一个额外的泛型参数。
使用这个类型应该允许你的action函数与useEffect钩子中的Dispatch类型兼容,以及在其他任何地方使用Dispatch。
此外,您应该为useEffect钩子提供dependencies数组,以防止不必要的重新呈现,并确保dispatch和findError是可访问的:

useEffect(() => {
    dispatch(getTodos(findError));
}, [dispatch, findError]);

希望这有帮助!

相关问题