在 React 中使用 Firebase 9、Redux Toolkit 和 Typescript 令人头疼。 'dispatch' 以某种方式具有类型 'never'？

Question

我正在尝试将现有的旧项目迁移到更新的技术，特别是标题中提到的那些。我对 Typescript、none 和 redux-toolkit 没有什么经验，我习惯了 Firebase v8，但为了模块化而迁移到 v9。

所以，在我的 firebase 实时数据库中，我有一个用户 table，我想从中获取一些信息，我正试图通过 createAsyncThunk 来自 @reduxjs/toolkit 来实现这一点但到目前为止运气不好。标准操作按照它们应该的方式处理，所以它绝对是制造问题的东西。我附上了一些代码：

咚咚

import { createAsyncThunk } from "@reduxjs/toolkit";
import { ref, onValue, DataSnapshot, child, DatabaseReference } from "firebase/database";
import { usersDb } from '../Firebase/utils';
import { MyBrandAppUser } from "../Types/MyBrandAppUser";

export const fetchMyBrandAppUser = createAsyncThunk('users/fetchMyBrandAppUser', async (uid: string, thunkAPI) => {
    const userEntry: DatabaseReference = child(usersDb, uid);
    let theUser: MyBrandAppUser | null = null;

    await onValue(userEntry, (snapshot: DataSnapshot) => {
        if( snapshot.exists() ) 
            theUser = <MyBrandAppUser>snapshot.val();
        else
            return null;
    }, 
    (err: Error) => {
        thunkAPI.rejectWithValue(err)
    });
    
    return theUser;  
})

恐怕第一部分不会达到我的预期，因为 onValue 不会 return 一个承诺，但这可能是另一个话题了。

店铺

import { configureStore, EnhancedStore } from "@reduxjs/toolkit";
import userReducer from '../Features/Auth';
import logger from "redux-logger";
import thunk from "redux-thunk";
import { useDispatch } from 'react-redux'

export const store: EnhancedStore = configureStore({
    reducer: {
        auth: userReducer,
    },

    middleware: (getDefaultMiddleware) => getDefaultMiddleware({
        serializableCheck: false,
    }).concat(logger).concat(thunk)
})

export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();

我的用户切片：

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { User } from "firebase/auth";
import { WritableDraft } from "immer/dist/internal";
import { UserState } from "../../Types/Redux/States";
import { fetchMyBrandAppUser  } from "../../API/fetchUser";
import { MyBrandAppUser } from "../../Types/MyBrandAppUser";

const initialState: UserState = {
    firebaseUser: undefined,
    myBrandAppUser: undefined,
}

const authSlice = createSlice({
    name: "users",
    initialState,
    reducers: {
        setFirebaseUser: (state: WritableDraft<UserState>, action:PayloadAction<User | null>) => {
            state.firebaseUser = action.payload;
        }, 
    }, 

    extraReducers: builder => {
        builder.addCase(fetchMyBrandAppUser.fulfilled, (state: WritableDraft<UserState>, action) => {
            state.myBrandAppUser = action.payload;
        })
    }
})

export const { setFirebaseUser } = authSlice.actions;
export default authSlice.reducer;

但现在如果我尝试调用 dispatch(fetchMyBrandAppUser(userID)) 打字稿不会让我，并有以下抱怨：

对于常规操作：Argument of type '{ payload: User | null; type: string; }' is not assignable to parameter of type 'never'.ts(2345)
对于 thunk 操作：Argument of type 'AsyncThunkAction<null, string, {}>' is not assignable to parameter of type 'never'.ts(2345)

我做错了什么？

Answer 1

我通过删除商店中的 EnhancedStore 类型解决了这个问题，以供将来参考。

在 React 中使用 Firebase 9、Redux Toolkit 和 Typescript 令人头疼。 'dispatch' 以某种方式具有类型 'never'？

Getting headaches using Firebase 9, Redux Toolkit and Typescript in React. 'dispatch' somehow has type 'never'?

firebase

typescript

reactjs

redux-thunk

redux-toolkit