redux action実行後に次のaction

Question

reduxのactionについて質問なのですが
action_Aを実行後にaction_Bを実行したいのですが(jqueryのdoneのような)
このような場合どういう実装をしたら良いのでしょうか？
現在はmiddlewareを使用し

middleware = store => next => action => {
    next(action)
    store.dispatch(action_B)
}

といった実装しているのですが他に良い方法ご教授ください

Comments

[jun68ykt]

ご質問の趣旨を確認させてください。質問に「action_Aを実行後にaction_Bを実行したい」とありますが、実現したいことをもう少し詳しくいうと、「action_Aを実行させ、その実行終了を待って、action_Aの結果をもとにaction_B (だったり、あるいはAの結果によってはaction_Cだったり）を実行したい」ということでよいでしょうか？

[Probationer]

はい、その通りですね。説明が下手ですみません^_^;

Answer 1

おやりになりたいことが「複数の非同期処理に対して順序性を担保しつつ、各処理の実行結果を踏まえながら処理を実行させたい」ということだと理解しました。もしそうだとすると、ある処理結果を待ってから次の処理に移ることを可能にするシンタックスシュガーがES7に存在しますので、安全に実装したい場合は、それを活用されることをお薦めします。
いわゆる、async/awaitと呼ばれているものです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function

以上、ご参考まで。

Answer 2

こんにちは。

「質問への追記・修正の依頼」のほうで確認させて頂きました、

action_Aを実行させ、その実行終了を待って、action_Aの結果をもとにaction_B (だったり、あるいはAの結果によってはaction_Cだったり）を実行

を実現するための一案を回答します。

action_Aを実行させ、その実行終了を待って

ということなので、action_A を dispatch することで実行される処理は、分かりやすい例でいうと
Web APIの呼び出しのような非同期処理を想定しています。

つまり、action_A で何らかの Web APIを呼んで、それが成功（200 OK など）で返ってきた場合は、
次に、action_Bを行い、失敗（レスポンスコードが404や500)の場合は、action_C を
dispatch したい、という状況です。

このような非同期処理と redux の連携には、redux-thunk や redux-saga を使うのが、
現時点では良いかと思います。

良いと思われる理由は、それぞれの使い方の記事や質問、回答が stackoverflow やQiita、
本家GitHubレポジトリのissuesで、それなりに見つかるからです。

これらについての概要を把握するには、以下あたりにざっと目を通すとよろしいかもしれません。

• reduxで非同期処理をするいくつかの方法（redux-thunk、redux-saga） m4iyamaさん@qiita

• GitHub: redux-saga/README_ja.md

• redux-sagaで非同期処理と戦う kuyさん@qiita

また、手前味噌で恐縮ですが、私も今いま、reactとreduxを使った（それなりの規模の）
フロント開発に従事しておりまして、そこでは redux-saga を使っていますが、
その開発途上で生じた課題解決を試すコードを書いて 以下を投稿しました。

• Reactサンプル：redux-sagaとreact-router v4でWebAPIの結果に応じて画面遷移させる。（前編）

上記、redux-saga を使ったサンプルとして、ざざっと眺めてもらえると嬉しいです。

それと、最近、JavaScript の最新動向について調べる機会があって、そこで、
「ES7 の Async/Await を使うと redux-saga も不要になるかも？」
と思ったりもしましたが、今のところ、目下のプロジェクトでは redux-saga を
便利に使わせてもらっています。

以上、参考になりましたら幸いです。

---

追記

最終的には、redux-thunk や redux-sagaのような、世に出回っているものを採用するにしても、
ご質問にあるような、「middlewareを自分で実装してみよう」という試みはとてもよいと思います。

Comments

[Probationer]

返信が遅くなり申し訳ありません
回答を参考にさせていただきredux-thunkを使ってみました
ありがとうございます

ちなみになのですが

1.action_Aに値(x)を渡し実行(state_Aに値を登録していく)
2.前回の値(y)と値(x)を渡しaction_Bを実行(state_Bに差分を登録していく)
(2の処理はaction_Aが実行されたタイミングで実行される)

といったモノを作りたかったのですがこういった処理の場合もredux-thunkやredux-sagaなどが使われるのでしょうか？

[jun68ykt]

こんにちは。

> ・・・といったモノを作りたかったのですがこういった処理の場合もredux-thunkやredux-sagaなどが使われるのでしょうか？

について、説明のための例として、以下を想定します。

(1) state_A に整数値の value プロパティがある。

(2) あるコンポーネントX は、redux に connect されており、mapStateToProps に
　よっ てstate_A を 、同名の state_A という props として受け取る。

上記のとき、value が変化した際に、Xからアクションを送出するためには
X の componentDidUpdate で、

componentDidUpdate(prevProps) {
　if (this.props.state_A.value !== prevProps.state_A.value) {
　　this.props.dispatch(saveDiffOfA(this.props.state_A.value - prevProps.state_A.value ));
　}
}
のようにすればよいかと思います。

なお上記のコードで、 saveDiffOfA は、state_B を更新するアクションを生成する
アクションクリエータで、state_A.value の差を引数に取り、それを何らか使って
state_B を更新するようなものを想定しています。

上記のようにcomponentDidUpdateを使うことで、ある redux state の値の差分を
取得することは、 非同期処理のために redux-saga あるいはredux-thunkを使うのか、
または別の手段で処理するのかによらず、使えると思います。

参考） https://reactjs.org/docs/react-component.html#componentdidupdate

以上参考になれば幸いです。