调度异步函数中的错误不能分配给 React、Typescript、Redux 中 Anyaction 类型的参数

Question

我正在创建一个 Web 应用程序，我在其中使用 firebase 作为数据库，我正在使用 redux 和 typescript。我在这样的回调中进行了调度：

export const uploading=(direction:string)=>{
    return async(dispatch:Dispatch,getState:()=>State)=>{
        const {active} = getState().dates;
        const ss = await getSS(direction);
        active.home = ss;
        dispatch(save(active));
    };
};

我得到的错误如下：

Argument of type '(dispatch: Dispatch, getState: () => State) => Promise<void>' is not assignable to parameter of type 'AnyAction'.    Property 'type' is missing in type '(dispatch: Dispatch, getState: () => State) => Promise<void>' but required in type 'AnyAction'.

调度中出现的函数如下：

export const save = (dates:Dates) => {
    return async(dispatch:Dispatch,getState:()=>State) => {
        const { uid } = getState().auth;
        const dateToSave = {...date,id:""};
        const dateToFirestore = doc(db,`${uid}/dates/${dates.id}`);

        try{
            await updateDoc(dateToFirestore,dateToSave);
            dispatch(refreshDate(date.id,date));
            console.log("ok")
        }catch(error){
            console.log(error)
        }
    };
};

现在，如果我不从异步函数进行调度我没有任何问题，事实上我已经这样做来保存新数据，但是当我尝试从上述函数调用它时我收到错误消息。

我的店铺

import {combineReducers,compose,createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

import {authReducer} from '../reducers/authReducer';
import {uiReducer} from '../reducers/uiReducer';
import {datesReducer} from '../reducers/datesReducer';

const reducers = combineReducers({auth: authReducer,ui: uiReducer,dates: datesReducer});

const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__||compose;

export const store = createStore(
    reducers,
    composeEnhancers(applyMiddleware(thunk))
);

我想补充一点，我告诉你，如果我派发一个普通的Action是没有问题的，就是一个没有return异步函数的action

Answer 1

来自 redux store.ts

import { AnyAction } from 'redux';

return async(dispatch: Dispatch<AnyAction>, getState: () => State)
// rest of your code

或使用从 redux-thunk

导入的 ThunkDispatch

import { AnyAction } from 'redux';
import { ThunkDispatch } from 'redux-thunk';

// Types to cut down on boilerplate across dozens of thunks.
type Dispatcher = ThunkDispatch<State, undefined, AnyAction>;
type GetState = () => State;

return async(dispatch: Dispatcher , getState: GetState)
// rest of your code

这里是redux maintainer写typescript

的一些想法

It feels like a number of TS users would rather spend hours trying to come up with unreadable and incredibly complex type declarations, rather than solving real problems and shipping code that does something useful

我认为这是真的，当我们第一次打字时，用 any 打它 ^^ 用 FIXME 标记它，然后继续下一个任务

Answer 2

特别是在使用TypeScript时，你应该使用官方的Redux Toolkit。即使是 JS 代码也至少被削减了一半，但是你保存了几乎所有传统 Redux 会有的 TS 类型声明。

此外，更重要的是这个问题，有明确的 documentation on how to set that up to be used with TypeScript，包括定义特定的 useAppDispatch 挂钩，这些挂钩考虑了所有 Redux 中间件（包括 thunk）的类型.

在这种情况下：

import { configureStore } from '@reduxjs/toolkit'
import { useDispatch } from 'react-redux'
import rootReducer from './rootReducer'

const store = configureStore({
  reducer: rootReducer,
})

export type AppDispatch = typeof store.dispatch // you can use this Dispatch type in your thunks
export const useAppDispatch = () => useDispatch<AppDispatch>() // Export a hook that can be reused to resolve types

export default store

调度异步函数中的错误不能分配给 React、Typescript、Redux 中 Anyaction 类型的参数

Error in dispatch async function is not assignable to parameter of type Anyaction in React, Typescript, Redux

typescript

reactjs

redux