在 TypeScript 中键入 Redux 工具包的存储答案

【问题标题】：Typing Redux toolkit's store in TypeScript在 TypeScript 中键入 Redux 工具包的存储
【发布时间】：2020-01-19 21:05:13
【问题描述】：

我正在尝试开始在 React + TypeScript 中使用 Redux，因此我遵循 Redux Toolkit 的教程并尝试在示例应用中实现它。

我在输入有关 store 和 mappStateToProps 函数参数时遇到很多困难。

我用切片配置了 store，如下：

import { configureStore } from '@reduxjs/toolkit'

import linksReducer from '../features/links/linksSlice'

const store = configureStore({
  reducer: {
    links: linksReducer,
  },
})

export default store
export type AppStore = typeof store

我像这样连接了一个组件：

import React from 'react'
import { connect, ConnectedProps } from 'react-redux'

import { AppStore } from '../../features/appStore'
import { deleteLink } from '../../features/links/linksSlice'

import LinkCard from './LinkCard'
import Link from '../../models/Link'
import EmptyList from './EmptyList'

const mapStateToProps = (state: any) => ({
  links: state.links,
})
const mapDispatchToProps = { deleteLink }
const connector = connect(mapStateToProps, mapDispatchToProps)

const LinksGrid = (props: ConnectedProps<typeof connector>) => {
  //  ...
}

export default connector(LinksGrid)

如您所见，我使用any 类型作为mapStateToProps 函数的第一个参数，因为我不知道应该如何键入它。使用any，我运行应用程序没有问题，所以我假设我只有打字问题。

RTK的官方文档只给出了一个使用combineReducers而不是configureStore的例子，它使用了TS的ReturnType<T>，它只能在函数上工作，当然store变量不是函数所以它不工作。
我也阅读了 Redux 和 React Redux 文档，但我仍然不知道该怎么做。

我确信这实际上很简单，但我在这里......谁能帮我打字？

谢谢:)

【问题讨论】：

标签： reactjs typescript redux

【解决方案1】：

Redux Toolkit Advanced Tutorial 和 Usage with TypeScript 文档页面都向您展示了如何正确执行此操作。

首先，这里重要的不是 store 的类型。它是 store state 的类型。

如果您自己使用combineReducers()，您可以将该类型定义为：

const rootReducer = combineReducers({
    first: firstReducer,
    second: secondReducer,
});

type RootState = ReturnType<typeof rootReducer>

但是，由于您通过将切片缩减器传递给configureStore（在内部调用combineReducers()）来使用速记设置表单，因此您可以通过检查store.getState 的返回类型来做同样的事情：

const store = configureStore({
    reducer: {
        first: firstReducer,
        second: secondReducer,
    }

});

type RootState = ReturnType<typeof store.getState>

然后，如文档中所示，您可以将RootState 类型导入组件文件，并将其用作mapState 函数中的类型：

import {RootState} from "app/store";

const mapStateToProps = (state: RootState) => ({
  links: state.links,
})

【讨论】：

哦，所以我错过了store.getState，因为我使用的是configureStore，而不是combineReducers。应该更新文档以反映我的想法，因为演练说明了configureStore，但是 TS 部分并没有明确说明您需要存储类型。我承认这是合乎逻辑的，但作为 Redux 的初学者，我还不够舒服，无法独自完成：-/ 无论如何，谢谢 :)
是的，再次强调：重要的是状态对象的类型。实际上有三种方法来定义它：1）自己手动定义它； 2）从根reducer的返回类型推断； 3）从store.getState()的返回类型推断。既然您提到了它，我不确定我们是否提到了第三个选项，因为文档显示您自己使用 combineReducers() 与将切片缩减器传递给 configureStore()。
这不起作用export type RootState = ReturnType<typeof store.getState>; 只正确获取密钥而不是类型，所有类型对我来说都是never
@KristiJorgji ：最好的办法是提出一个新问题并显示您当前的代码，尤其是在您导入减速器和设置商店的地方。也可以在 Reactiflux Discord 中询问。

【解决方案2】：

对我有用：

store?: EnhancedStore<{ default: RootState }, AnyAction, [ThunkMiddleware]>;

另外我为ThunkMiddleware添加了redux-thunk

【讨论】：