概要
Flumpt で使用できるように、 react-redux の connect
を移植しました。
動機
Flumpt で React-Router を使用した場合や、コンポーネントの階層が深く props
のリレーをしたくない場合に、 context.emitter.state
から状態を取得できます。
しかし、propTypes
による props のバリデーションができず、コンポーネントがどの props を使用する / 必要とするのか把握しずらいという問題があります。
この問題を解決するため react-redux
の connect
を移植しました。
コード
仕様
connect([mapStateToProps], [mergeProps], [options])
react-redux
の connect
の第2引数の mapDispatchToProps
はありません。
それ以外のパラメータは react-redux
と同じです。
使用方法
import React from 'react';
import {Link} from 'react-router';
import {connect} from 'react-flumpt';
class MyComponentPage extends React.Component {
componentDidMount() {
}
render() {
const {dispatch, count} = this.props;
return (
<div>
<Link to="/">Home</Link>
<hr />
{count}
<br />
<button onClick={() => dispatch("increment")}>increment</button>
</div>
);
}
}
function mapStateToProps(state) {
return {
count: state.count
};
}
export default connect(
mapStateToProps,
null,
{withRef: true}
)(MyComponentPage);
-
mapStateToProps
の書き方は、react-redux
と同じです。 -
dispatch
はprops
にあります。