Redux 调度函数和 TypeScript

Question

有这么简单的React 组件：

import React from 'react';
import { connect } from 'react-redux';
import { INCREMENT, DECREMENT } from '../Misc/actions';

interface Props {
    count: number,
    asd: number
}

class Counter extends React.Component<Props> {
    state = { count: 0 }

    increment = () => {
        this.props.dispatch({ type: "INCREMENT" });
    }

    decrement = () => {
        this.props.dispatch({ type: "DECREMENT" });
    }

    render() {
        ...
        )
    }
}

type ICounterState = {
    count: number
}

function mapStateToProps(state:ICounterState) {
    return {
        count: state.count,
        asd: 78
    };
}

export default connect(mapStateToProps)(Counter);

我收到一个错误：Property 'dispatch' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'。

我肯定是TypeScript 错误但是如何解决这个问题？

Answer 1

将dispatch 属性添加到Props 接口。由于Dispatch 接口是泛型的，它接受泛型参数，所以你需要使你的Props 泛型接口。

import React from 'react';
import { Dispatch, Action, AnyAction } from 'redux';
import { connect } from 'react-redux';

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

interface Props<A extends Action = AnyAction> {
  count: number;
  asd: number;
  dispatch: Dispatch<A>;
}

class Counter extends React.Component<Props> {
  state = { count: 0 };

  increment = () => {
    this.props.dispatch<{ type: typeof INCREMENT }>({ type: INCREMENT });
  };

  decrement = () => {
    this.props.dispatch({ type: DECREMENT });
  };

  render() {
    return <div>counter</div>;
  }
}

type ICounterState = {
  count: number;
};

function mapStateToProps(state: ICounterState) {
  return {
    count: state.count,
    asd: 78,
  };
}

export default connect(mapStateToProps)(Counter);