Reduxの少し込み入った話題

ぼちぼちとあるシステムにReduxを導入していっているんですが、Reduxとその周辺で、いくつか調べたことをメモっておきます。

combineReducersとは何か？

reducerを分割するための便利関数。

qiita.com

が、わかりやすかったです。

import { combineReducers } from 'redux';

function foo(state /* globalState.foo */, action) {}

function bar(state  /* globalState.bar */, action) {}

export default combineReducers({
  foo, bar
});

こんな感じで書くと、グローバルなstateのfooがreducer fooの引数のstateになるという感じ。

ネットに流れている情報は古いことが多いので、examples、 または↓の公式ドキュメントのソースコードを利用するべき
http://rackt.github.io/redux/docs/api/combineReducers.html

react-reduxのconnectがわかりづらい

↓みたいなソースなんなの？と思ってましたが、

import * as actionCreators from './actionCreators';

function mapStateToProps(state) {
  return { todos: state.todos }; // this.props.todosにセット
}

export default connect(mapStateToProps, actionCreators)(TodoApp);

mapStateToProps はglobalなstateから、利用する値をとってきて、this.propsにセット。
actionCreatorsは

• this.method.actionHoge() を呼ぶと、store.dispatch()が呼ばれる
• actionCreatorsのメソッドをthis.propsにセット

してくれる感じ。

なんかすごくわかりづらかった。。

Flux Standard Action

なんてものがあるよう。

github.com

Redux専用じゃなくて、FluxのAction全般で使えるものらしい。

An action MUST

be a plain JavaScript object. have a type property. An action MAY

have a error property. have a payload property. have a meta property.

An action MUST NOT include properties other than type, payload, and error, and meta.

スター数400弱、うーむ、従うべきかどうか・・・（多分従わないかな・・・）