Reduxのconnectについて

Reduxのconnectについての備忘録です

connectについて

connect(func1, func2)(Test);

• 第一引数の「func1」はcomponentに渡すpropsを制御する
• 第二引数の「func2」はreducerを呼び出して、reduxで管理しているstateを更新する
• Testは取得したデータをpropsとして扱いたいcomponentを指定する

connectの第一引数について

function mapStateToProps(state, props) {
  return {
    data: state.reducer.hoge
  };
}

• func1の第一引数「state」はreduxで管理している全てのstateを持っている
• func1の第二引数「props」はconnectしたcomponent本来のpropsを取得する
• connectしたcomponentで「this.props.data」とアクセスすることでreducerで管理している「hoge」の値を取得できる

connectの第二引数について

function mapDispatchToProps(dispatch) {
  return {
    foo: () => dispatch({
      type: Actions.DISPATCH_EVENT,
      hoge: true,
    }),
  }
};

• connectしたcomponentで「this.props.foo」を実行すると、reduxで管理しているstateを更新する

componentの指定

class Test extends React.Component {
  ...
}
export default connect(mapStateToProps, mapDispatchToProps)(Test);