概要

Flumpt で使用できるように、 react-redux の connect を移植しました。

動機

Flumpt で React-Router を使用した場合や、コンポーネントの階層が深く props のリレーをしたくない場合に、 context.emitter.stateから状態を取得できます。

しかし、propTypes による props のバリデーションができず、コンポーネントがどの props を使用する / 必要とするのか把握しずらいという問題があります。

この問題を解決するため react-redux の connect を移植しました。

コード

yasuhiro-okada-aktsk/react-flumpt: react-redux porting for flumpt

仕様

connect([mapStateToProps], [mergeProps], [options])

react-redux の connect の第２引数の 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 にあります。