ボタンがクリックされることにより複数のactionが発行される場合（例）

Question

react + reduxを使用しています。

たとえばなのですが、ボタンがクリックされることにより、複数のactionを発行したいとします。
このとき、コンポーネントのonClickに以下のように書く方法があると思います。

const TestComp = props => {
  const handleClick = () => {
    props.actionA();
    props.actionB();
    props.actionC();
  };
  return <button onClick={handleClick}>test button</button>;
};

const mapDispatchToProps = dispatch => ({
  actionA() {
    dispatch(actionA());
  }
  actionB() {
    dispatch(actionB());
  }
  actionC() {
    dispatch(actionC());
  }
});

export default connect(
  null,
  mapDispatchToProps
)(TestComp);

これではコンポーネントが長くなってしまうので、container側でまとめる方法もあると思います。

const TestComp = ({ handleClick }) => {
  return <button onClick={handleClick}>test button</button>;
};

const mapDispatchToProps = dispatch => ({
  handleClick() {
    dispatch(actionA());
    dispatch(actionB());
    dispatch(actionC());
  }
});

export default connect(
  null,
  mapDispatchToProps
)(TestComp);

または、action typeに'ONCLICK'みたいなもの作成し、その一つのaction typeに対して複数のreducerが処理する、みたいな方法もあると思っています。

他にも方法はあるのかもしれませんが（あったらぜひ教えてください！）、どの実装パターンがもっとも良いと考えられるでしょうか？

状況によって最前の実装パターンが変わる場合には、どういう状況でどの実装がよいのか、など教えていただけると幸いです。

よろしくお願いします！

Answer 1

こんにちは

こういうモジュールがありますという参考情報を回答します。

以下は、 redux の issue Batching actions #911 での、Reduxの作者のお一人である、Dan Abramovさんのコメントからの引用です。

Instead, the “Redux approach” to this would be to create a batching action creator:

function batchActions(...actions) {
  return {
    type: 'BATCH_ACTIONS',
    actions: actions
  };
}

// usage
store.dispatch(
  batchActions(
    doSomething(),
    doSomethingElse()
  )
);

and a higher order reducer:

function enableBatching(reducer) {
  return function batchingReducer(state, action) {
    switch (action.type) {
    case 'BATCH_ACTIONS':
      return action.actions.reduce(batchingReducer, state);
    default:
      return reducer(state, action);
    }
  }
}

// usage
let store = createStore(enableBatching(reducer));

上記のコメントを受けて、issueを起票した方の作成したモジュールが以下です。

• redux-batched-actions

上記を使うと、

  const handleClick = () => {
    props.actionA();
    props.actionB();
    props.actionC();
  };

と書いていたのが、「アクションA、アクションB、アクションCを順次行う」ということを一つのアクションで書けて、この、まとめたアクションをdispatchするということができるようになるようです。

Dan Abramovさんのコメントの中では、このようなやり方が

“Redux approach”

だと言っていますね。
申し訳ないですが、このモジュールを私自身は使ったことがありません。

参考になれば幸いです。