如何使用 makeStore 函数动态确定 redux 工具包中的 RootState 类型

Question

我正在尝试获取我的 redux 存储的类型以声明 RootState 类型。到目前为止，我一直在创建和导出 redux 工具包文档中指定的 store 实例，并且没有遇到任何问题，但现在由于各种原因，我想要一个 makeStore 函数到 return每次打电话都是一家新店。

我的问题是，虽然我有一个有效的实现，但 RootState 的类型是 any，这导致没有自动完成建议。

我的代码如下：

import {
    configureStore,
    combineReducers,
    EnhancedStore,
    ConfigureStoreOptions,
} from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import {
    persistStore,
    persistReducer,
    FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER,
} from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import { cartReducer } from '@hooks';

import appReducer from './reducer';
import rootSaga from './saga';

export const makeStore: (
    initialState?: ConfigureStoreOptions['preloadedState']
) => EnhancedStore = (initialState = {}) => {
    const persistConfig = {
        key: 'root',
        version: 1,
        storage,
    };

    const persistedReducer = persistReducer(
        persistConfig,
        combineReducers({ app: appReducer, cart: cartReducer })
    );

    const sagaMiddleware = createSagaMiddleware();

    const store = configureStore({
        reducer: persistedReducer,
        preloadedState: initialState,
        middleware: getDefaultMiddleware =>
            getDefaultMiddleware({
                thunk: false,
                serializableCheck: {
                    ignoredActions: [
                        FLUSH,
                        REHYDRATE,
                        PAUSE,
                        PERSIST,
                        PURGE,
                        REGISTER,
                    ],
                },
            }).concat(sagaMiddleware),
    });

    sagaMiddleware.run(rootSaga);

    return store;
};

const store = makeStore();
export const persistor = persistStore(store);
export type RootState = ReturnType<typeof store.getState>; // this is "any"
export type AppDispatch = typeof store.dispatch; // this is "Dispatch<AnyAction>"

export default store;

我认为问题的最可能原因在于 EnhancedStore，它是一个通用的，看起来像这样：

export interface EnhancedStore<S = any, A extends Action = AnyAction, M extends Middlewares<S> = Middlewares<S>> extends Store<S, A> {
    /**
     * The `dispatch` method of your store, enhanced by all its middlewares.
     *
     * @inheritdoc
     */
    dispatch: DispatchForMiddlewares<M> & Dispatch<A>;
}

我不太确定 S 应该是什么，所以我没有向它传递任何东西，它默认为 any。

我的问题是，在使用 redux-toolkit 和 makeStore 函数时获取商店状态类型的最佳方法是什么？

Answer 1

只需删除您的 return 类型。

真正的 return 类型更加细微，您通过自己分配一个 window 来丢弃该信息。

export const makeStore: (
    initialState?: ConfigureStoreOptions['preloadedState']
) = (initialState = {}) => {

如何使用 makeStore 函数动态确定 redux 工具包中的 RootState 类型

How to dynamically determine RootState type in redux toolkit with makeStore function

typescript

reactjs

redux

react-redux

redux-toolkit