Question

我目前正在学习redux和typescript的教程。

因为我喜欢与函数式编程相比的面向对象编程，所以我决定创建一个容器 - 窗口小部件抽象类但是我很困惑如何转换它。

原始代码：

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink

转换代码（迄今为止）：

import {State} from "./State";
import {connect} from 'react-redux';
import * as React from "react";

export abstract class Container {

    abstract mapStateToProps(state : State) : any;

    abstract mapDispatchToProps(dispatch : any) : any;

    constructor(connector : React.ComponentClass<any>) {
        connect(
            this.mapStateToProps,
            this.mapDispatchToProps
        )(connector);
    }
}

稍后，我将使用此抽象类扩展容器。例如：

class LoginForm extends Container {

}

在另一个组件中

render() {
    <App><LoginForm></LoginForm></App>
}

在redux typescript中创建Container类

0 个答案: