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



我正在尝试获取redux存储的类型,以便声明RootState类型。到目前为止,我一直在创建和导出redux toolkit文档中指定的store实例,没有遇到任何问题,但现在由于各种原因,我希望每次调用makeStore函数时都能返回一个新的存储。

我的问题是,虽然我有一个工作实现,但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工具箱和makeStore函数时,获得存储状态类型的最佳方法是什么?

只需删除您的返回类型。

真正的返回类型要微妙得多,你通过自己分配一个返回类型将信息抛出了窗口。

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

最新更新