时间戳

首页 > 解决方案 > React redux typescript 为 reducer action 分配两个接口

reactjs - React redux typescript 为 reducer action 分配两个接口

问题描述

在 react typescript 中，如何将两个接口分配给 reducer 函数：标准 {type: string, payload: object} 和 redux-thunk？

减速器.ts

interface IReduxThunkAction {
  (dispatch: any): Promise<void>;
}
interface IActionPayload {
  type?: string;
  payload?: any;
}

type IAction = IActionPayload | IReduxThunkAction;

const reducer = (prevState = initialState, action: IAction): IInitialState => {
  switch (action.type) {
    case UPDATE_ITEMS:
      return updateItemsData(prevState, action.payload);
    default:
      return prevState;
  }
};

这是给我的错误：

类型“IAction”上不存在属性“类型”。类型“IReduxThunkAction”上不存在属性“类型”。

动作.ts

export const getItems = (
  term: string
): ThunkAction<Promise<void>, {}, {}, AnyAction> => {
  return (dispatch: ThunkDispatch<{}, {}, AnyAction>): Promise<void> => {
    return searchItems(term)
      .then(response => {
        const { results } = response.data;
        dispatch(updateItems(results));
      })
      .catch(() => {
        dispatch(fetchError());
      });
  };
};

项目列表.tsx

// function with useReducer hook inside it

const [reducerState, dispatch] = useReducer(reducer, initialState);

// more code...

const handleSearch = (event: { preventDefault: () => void }) => {
    event.preventDefault();
    if (validateInput(state.value)) {
      dispatch(actions.changeSpinnerState());
      return dispatch(actions.getItems(state.value))
      .then(() =>
        dispatch(actions.changeSpinnerState())
      );
    }
  };

在这里它告诉我在线调度（actions.getItems（state.value））：

'ThunkAction, {}, {}, AnyAction>' 类型的参数不能分配给'IAction' 类型的参数。类型“ThunkAction、{}、{}、AnyAction>”不可分配给类型“IReduxThunkAction”。

标签： reactjstypescriptreact-reduxreact-hooksreact-typescript

解决方案

好的，我解决了：

项目列表.tsx

const [reducerState, dispatch] = useReducer(reducer, initialState);

// more code...

const handleSearch = (event: { preventDefault: () => void }) => {
    event.preventDefault();
    if (validateInput(state.value)) {
      dispatch(actions.changeSpinnerState());
      dispatch(actions.changeSpinnerState());
      actions.getItems(state.value)(dispatch as IActionPayload);
    }
  };

动作.ts：

export const getItems = (term: string): React.Dispatch<IActionPayload> => {
  return (dispatch: any): Promise<void> => {
    return searchItems(term)
      .then(response => {
        const { results } = response.data;
        dispatch(actions.changeSpinnerState());
        dispatch(updateItems(results));
      })
      .catch(() => {
        dispatch(fetchError());
      });
  };
};

减速器.ts：

 const reducer = (prevState = initialState,  action: IActionPayload
): IInitialState => {
  switch (action.type) {
    case UPDATE_ITEMS:
      return updateItemsData(prevState, action.payload);
    default:
      return prevState;
  }
};

推荐阅读