带有 preloadedState 的 Redux (Toolkit) 存储的类型定义 [英] Type definitions for Redux (Toolkit) store with preloadedState

问题描述

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

I'm trying to make typings work for configuring a Redux store with a preloaded state.

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

不幸的是，在预加载状态下，它看起来更像这样:

Unfortunately with a preloaded state, it looks more like this:

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

  return store
}

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

From where do I now get the RootState type and the AppDispatch type?

推荐答案

State from Reducer

您可以根据减速器的参数类型推断您的状态类型.我们希望将 reducer 值分离到一个单独的 const 中，以便仅在 reducer 上使用 typeof.

State from Reducer

You can infer the type of your state based on the argument types of your reducers. We will want to separate the reducer value into a separate const in order to use typeof on just the reducer.

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

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

You are using an object of slice reducers rather than a function created combineReducers. Redux toolkit exports a utility type that we can use to infer the state from reducer map object notation.

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

export type RootState = StateFromReducersMapObject<typeof reducer>

返回类型

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

Return Types

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. That would be the most similar to the example. This same approach also allows us to get the type for AppDispatch. Note that we use bracket notation instead of dot notation because our Store is a type, not an object.

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

预加载状态类型

在 initStore 之外分离 reducer 的好处是我们现在可以使用来自 reducer 的类型来为 preloadedState 参数，之前没有输入.

PreloadedState Type

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.

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 链接

这篇关于带有 preloadedState 的 Redux (Toolkit) 存储的类型定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！