React, Redux, redux-saga, Immutable.jsで悩んだ部分メモ

※随時更新

前提

- React
- Redux
- react-redux
- redux-saga
- redux-actions
- Immutable.js

メモ

redux-sagaでforEachを使うような処理をしたい場合

import Range as range from 'immutable';

// これでも良いのですがネストを深くしたくなかったのとcallbackはアロー関数で統一したいと思いました
function *foreachSaga() {
  range(1, max).forEach(function* (num) {
       yield call(generatoFunc, num); 
    }
  );
}

↓

// mapを使いyieldに配列でわたす
function *mapSagaCall() {
  yield range(1, num)
    .map((num) => call(generatoFunc, num, body))
    .toArray();
}

// yield*を使うパターン
function *mapSagaAsterisk() {
  yield* range(1, num)
    .map((num) => generatoFunc（num, body))
    .toArray();
}

Immutable.jsで対象がimmutableなデータかどうかチェックする

const { Iterable, Map } = 'immutable';

Iterable.isIterable({}); // false
Iterable.isIterable('hoge'); // false
Iterable.isIterable(Map({})); // true
Iterable.isIterable(Map({xxx: 'xxx'})); // true

ReduxのbindActionCreatorsでdispatchに関連付けてconnectでmapDispatchToPropsしたactionをそのままonClick等に指定したら以下のようなエラーがでました

クリックしてから実行されるまでも少し時間がかかっていました

Warning: This synthetic event is reused for performance reasons. 
If you\'re seeing this, you\'re %s `%s` on a released/nullified synthetic event. 
%s. If you must keep the original synthetic event around, use event.persist(). 
See https://fb.me/react-event-pooling for more information.
or
This synthetic event is reused for performance reasons. 
If you\'re seeing this, you\'re adding a new property in the synthetic event object. 
The property is never released. See https://fb.me/react-event-pooling for more information.

// App.jsx
class App extends Component {
  render() {
    return <Content {...this.ptops} />;
  }
}

function mapStateToProps(state) {
  return {
    xxx: state.hoge,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    action: bindActionCreators(Action, dispatch),
  };
}

connect(
  mapStateToProps,
  mapDispatchToProps,
)(App);

// Content.jsx
function Content({ action }) {
  return (
    <div>
      <button onClick={action.update}></button>
    </div>
  );
}

↓

何故治ったのか根本的ところではわかっていないですが関数を作って中で実行したらWarningも出なくなり速度も改善されました。actionの引数にeventが渡されているのが余り良くなかったんだろうぐらいの認識です

function Content({ action }) {
  return (
    <div>
      <button onClick={() => { action.update(); }}></button>
    </div>
  );
}

/* or */

function Content({ action }) {
  const handleClick = () => { action.update(); }
  return (
    <div>
      <button onClick={handleClick}></button>
    </div>
  );
}

親Componentから複数の子コンポーネントに渡されたfunctionの挙動

明日書く

参考

- How to yield inside a forEach · Issue #306 · yelouafi/redux-saga
- Is there any way to check if data is immutable? · Issue #450 · facebook/immutable-js
- Event System | React
- react/SyntheticEvent.js at master · facebook/react