reactjs - 在 TypeScript 中键入 Redux 工具包的存储

Question

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

我在输入有关商店和 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 文档，但我仍然不知道该怎么做。

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

谢谢:)

Answer 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,
})