我目前正在学习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>
}