从 configureStore redux 工具包获取 root reducer答案

【问题标题】：Getting the root reducer from configureStore redux toolkit从 configureStore redux 工具包获取 root reducer
【发布时间】：2021-11-07 11:09:05
【问题描述】：

import { configureStore } from "@reduxjs/toolkit";
import testSlice from "./testSlice";
import {combineReducers} from "redux";

const rootReducer = combineReducers({test: testSlice})
export const store = configureStore({
  reducer: rootReducer,
});

export type RootState = ReturnType<typeof rootReducer>

这是我当前的解决方法，以获取我的根减速器的类型。我正在阅读文档，如果我使用切片在我的配置存储中创建减速器，我似乎无法找到如何从存储中获取我的根减速器。令人失望的是，我不得不在使用 redux-toolkit 时再次使用 combineReducers 来获取我的 rootReducer 类型。

我正在寻找这样的代码：

import { configureStore } from "@reduxjs/toolkit";
import testSlice from "./testSlice";
import userSlice from "./userSlice";

export const store = configureStore({
  reducer: {test: testSlice, user: userSlice},
});

export type RootState = ReturnType<typeof store.getReducer()>

【问题讨论】：

标签： reactjs typescript react-native redux redux-toolkit

【解决方案1】：

更好的 RootState 类型如下：

export type RootState = ReturnType<typeof store.getState>

此实现包含在document 中。请花点时间阅读。

如果您获取 rootReducer 的目的不仅仅是为了定义 RootState 类型，您可以简单地从存储文件中命名-导出它，然后将其导入您想要的文件中使用。

// store.js
// ...
export const rootReducer = combineReducers({test: testSlice});

rootReducer 在其他地方导入和消费并不是一个常见和实际的用法，而是在 store 文件中，它将用于配置 store 对象。因此，我认为 Redux Toolkit 没有必要提供访问 rootReducer 的方法。

【讨论】：

【解决方案2】：

你不需要

Huan's answer 恰到好处。您实际上不太可能需要访问根减速器类型。您可以在没有它的情况下获取状态类型。他们的答案是解决潜在问题的最佳方法。

但如果你想...

如果有人阅读此问题想知道如何从存储类型派生根 reducer 类型，可以使用 TypeScript 条件类型来完成。这与您在redux source code 中看到的逻辑相同。

我们可以定义一个可重用的实用程序类型，从 store 的类型中获取 reducer 类型。它通过访问状态S 和动作A 的类型来做到这一点，它们都是redux Store<S, A> 类型的泛型类型参数。然后我们将这些相同的泛型应用于Reducer<S, A> 类型。

// Can be imported from 'redux' or from '@reduxjs/toolkit', both are the same.
import { Reducer, Store } from '@reduxjs/toolkit';

type ReducerFromStore<T> = T extends Store<infer S, infer A> ? Reducer<S, A> : never

您可以使用此实用程序类型从特定商店实例获取根减速器类型。

export const store = configureStore({
  reducer: {test: testSlice, user: userSlice},
});

export type RootReducer = ReducerFromStore<typeof store>;

注意：configureStore创建的store对象的确切类型是redux工具包EnhancedStore type。但这扩展了核心 redux Store 类型，因此不需要特殊处理。

【讨论】：