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

Question

在 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”上不存在属性“type”。 类型“IReduxThunkAction”上不存在属性“type”。

动作.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()) ); } };

在这里它告诉我在线 dispatch(actions.getItems(state.value))：

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

Answer 1

好的，我解决了：

项目列表.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; } };