reactjs - 带有 preloadedState 的 Redux (Toolkit) 存储的类型定义

Question

我正在尝试使用类型来配置具有预加载状态的 Redux 存储。
Redux Toolkit TypeScript quick start guide有这个例子:

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 的参数类型推断您的状态类型。我们将要分离 reducer值到一个单独的 const为了使用typeof仅在 reducer 上。

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

您正在使用切片 reducer 的对象而不是创建的函数 combineReducers . Redux 工具包导出一个实用程序类型，我们可以使用它来从 reducer 映射对象表示法推断状态。

import { ReducerFromReducersMapObject } from "@reduxjs/toolkit";

export type RootState = StateFromReducersMapObject<typeof reducer>

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

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

预加载状态类型
分离 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']

Typescript Playground Link