具有预加载状态的 Redux (Toolkit) 存储的类型定义

Question

我正在尝试使类型用于配置具有预加载状态的 Redux 存储。

Redux Toolkit 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

不幸的是，对于预加载状态，它看起来更像这样：

export function initStore(preloadedState) {
const store = configureStore({
reducer: {
one: oneSlice.reducer,
two: twoSlice.reducer
},
preloadedState,
})
return store
}

我现在从哪里获得RootState类型和AppDispatch类型？

Answer 1

来自

Reducer 的状态

您可以根据化简器的参数类型推断状态的类型。 我们希望将reducer值分成一个单独的const，以便仅在化简器上使用typeof。

const reducer = {
one: oneSlice.reducer,
two: twoSlice.reducer
};

您使用的是切片缩减器的对象，而不是combineReducers创建的函数。 Redux 工具包导出了一个实用程序类型，我们可以使用它从化简器映射对象符号推断状态。

import { StateFromReducersMapObject } from "@reduxjs/toolkit";
export type RootState = StateFromReducersMapObject<typeof reducer>

返回类型

我们也可以通过查看initStore的ReturnType来获得Store的类型，然后通过查看商店getState方法的ReturnType来获得RootState。这将是与示例最相似的。 同样的方法还使我们能够获得AppDispatch的类型 . 请注意，我们使用括号表示法而不是点表示法，因为我们的Store是type，而不是object。

type Store = ReturnType<typeof initStore>
type RootState = ReturnType<Store['getState']>
type AppDispatch = Store['dispatch']

预加载状态类型

在initStore之外分离reducer的优点是，我们现在可以使用化简器中的类型来声明preloadedState参数的适当类型，这在以前没有类型化。

import { configureStore, Slice, StateFromReducersMapObject, PreloadedState } from "@reduxjs/toolkit";
const reducer = {
one: oneSlice.reducer,
two: twoSlice.reducer
};
export type RootState = StateFromReducersMapObject<typeof reducer>
export function initStore(preloadedState?: PreloadedState<RootState>) {
return configureStore({
reducer,
preloadedState,
});
}
type Store = ReturnType<typeof initStore>
export type AppDispatch = Store['dispatch']

打字稿游乐场链接