主页 / 问题 / 986813
Accepted
muturgan
Asked:2020-05-29 13:55:44 +0800 CST2020-05-29 13:55:44 +0800 CST

mapStateToProps 的类型捕获

  • 772

附加打字稿以做出反应

这是我的组件的样子：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { storeState } from '../../store/store';
import { ThunkDispatch } from 'redux-thunk';
import { AnyAction } from 'redux';

type ControlsProps = {
  tags: Array<string>;
  isLoading: boolean;
  limit: number;
  dispatch: ThunkDispatch<storeState, {}, AnyAction>;
}


class Controls extends Component<ControlsProps, {}> {
...
}

export default connect(
  (store: storeState) => ({
    isLoading: store.loading,
    limit: store.filters.limit,
    tags: store.tags,
  }),
)(Controls);

原来是重复枚举道具。

同时，如果我更改reducer的签名，那么在mapStateToProps中我的更改将立即通过导出的类型拉出，但是在ControlsProps中你需要记住手动进行更改，甚至可以打错字也没有一个人会发誓。
但我想在 mapStateToProps 中注册所有内容 1 次，以便在 ControlsProps 中获取更改本身。

有没有办法获取 mapStateToProps 的返回类型？

reactjs

1 个回答

  1. Best Answer
    import React, { Component } from 'react';
import { connect } from 'react-redux';
import { storeState } from '../../store/store';
import { ThunkDispatch } from 'redux-thunk';
import { AnyAction } from 'redux';

const mapStateToProps = (store: storeState) => ({
  isLoading: store.loading,
  limit: store.filters.limit,
  tags: store.tags,
});

type StateProps = ReturnType<typeof mapSateToProps>;

type ControlsProps = {
  dispatch: ThunkDispatch<storeState, {}, AnyAction>;
} & StateProps;

class Controls extends Component<ControlsProps, {}> {
...
}

export default connect(mapStateToProps)(Controls);
    • 1

相关问题