[英]Type definitions for Redux (Toolkit) store with preloadedState
I'm trying to make typings work for configuring a Redux store with a preloaded state.我正在尝试使用预加载的 state 配置 Redux 存储。
The Redux Toolkit TypeScript quick start guide has this example: Redux 工具包 TypeScript 快速入门指南包含以下示例:
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({
reducer: {
one: oneSlice.reducer,
two: twoSlice.reducer
}
})
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
Unfortunately with a preloaded state, it looks more like this:不幸的是,使用预装的 state,它看起来更像这样:
export function initStore(preloadedState) {
const store = configureStore({
reducer: {
one: oneSlice.reducer,
two: twoSlice.reducer
},
preloadedState,
})
return store
}
From where do I now get the RootState
type and the AppDispatch
type?我现在从哪里获得RootState
类型和AppDispatch
类型?
You can infer the type of your state based on the argument types of your reducers.您可以根据减速器的参数类型推断 state 的类型。 We will want to separate the reducer
value into a separate const
in order to use typeof
on just the reducer.我们希望将reducer
的值分离到一个单独的const
中,以便仅在 reducer 上使用typeof
。
const reducer = {
one: oneSlice.reducer,
two: twoSlice.reducer
};
You are using an object of slice reducers rather than a function created combineReducers
.您正在使用切片减速器的 object 而不是 function 创建的combineReducers
。 Redux toolkit exports a utility type that we can use to infer the state from reducer map object notation. Redux 工具包导出一个实用程序类型,我们可以使用它从减速器 map ZA8CFFDE6331BD59EB266AC96 推断 state。
import { ReducerFromReducersMapObject } from "@reduxjs/toolkit";
export type RootState = StateFromReducersMapObject<typeof reducer>
We could have just as well gotten the type for the Store
by looking at the ReturnType
of initStore
and then gotten the RootState
by looking at the ReturnType
from the store's getState
method.我们也可以通过查看ReturnType
的initStore
来获取Store
的类型,然后通过查看 Store 的getState
方法中的RootState
来获取ReturnType
。 That would be the most similar to the example.那将与示例最相似。 This same approach also allows us to get the type for AppDispatch
.同样的方法也允许我们获取AppDispatch
的类型。 Note that we use bracket notation instead of dot notation because our Store
is a type
, not an object
.请注意,我们使用括号表示法而不是点表示法,因为我们的Store
是type
,而不是object
。
type Store = ReturnType<typeof initStore>
type RootState = ReturnType<Store['getState']>
type AppDispatch = Store['dispatch']
The advantage of separating the reducer
outside of initStore
is that we can now use the types from the reducer to declare the appropriate type for the preloadedState
argument, which was not typed before.将reducer
分离到initStore
之外的好处是,我们现在可以使用 reducer 中的类型来为preloadedState
参数声明适当的类型,这是之前没有输入的。
import { configureStore, Slice, StateFromReducersMapObject, DeepPartial } from "@reduxjs/toolkit";
const reducer = {
one: oneSlice.reducer,
two: twoSlice.reducer
};
export type RootState = StateFromReducersMapObject<typeof reducer>
export function initStore(preloadedState?: DeepPartial<RootState>) {
return configureStore({
reducer,
preloadedState,
});
}
type Store = ReturnType<typeof initStore>
export type AppDispatch = Store['dispatch']
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.