Reduxでどんな処理を非同期処理とするのか

Question

こんにちは。
React,Reduxの開発の経験は多少ありますが、非同期処理,Redux-Sagaを勉強し始めたレベルのものです。
この質問は、僕の理解が正しいのかどうか確信が持てないので、主に確認のためのようなものになります。

聞きたいこと

非同期処理の勉強していますが、具体的にどんな処理を非同期処理として書くべきなのかを理解できていません。

• 何かIO系の時間のかかる処理を画面の一部で行うので、その準備ができるまでは他の処理をする

という認識であっていますでしょうか。

例えば、

• PCのtwitterのようなアプリを作り、ツイート以外のところは一瞬で読み込んで、ツイートの部分の読み込みは時間がかかる

→これは非同期処理にするべき

• 初期画面に検索窓のみ表示され、そこにキーワードを入れて検索すると、該当のツイートが表示される

→これは別にする必要はない

という感じでしょうか。

こういった処理に対して、わざわざredux-sagaなどを採用する理由は、

• 読み込み中にloading...などと表示するため
• 読み込みが終われば、すぐさま結果は表示するため

なのでしょうか。

その他、典型的にこういう処理は普通非同期処理として扱い、redux-sagaなどのmiddlewareを使って書くよねといったものがあれば教えていただけると嬉しいです。

歯切れの悪い質問ですみません。
よろしくおねがいします。

Answer 1

こんにちは。
目下、 react とreduxを使ったSPA開発に従事していますが、非同期処理に
redux-saga を採用して便利に使っています。

ご質問の回答ですが、

何かIO系の時間のかかる処理を画面の一部で行うので、その準備ができるまでは他の処理をする

という認識でほぼ正しいと言えますが、言い換えると

　何か時間のかかる(≒ 完了するまでの時間が不明な）処理をしている間、
UI（画面）を通じて、ユーザーに何かを知らせたり、
ユーザーからの入力が受けつけられなくなると不便なので、
その時間のかかる処理を（Promiseなどを使って、）非同期にやらせる。

という理解でよろしいかと思います。

典型的にこういう処理は普通非同期処理として

扱うものの一例としては、API の呼び出しです。

redux-saga の README にサンプルとして載っている sagas.js の冒頭：

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from '...'

// worker Saga: will be fired on USER_FETCH_REQUESTED actions
function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }

の、上記２行目にも

import Api from '...'

とあり、call で呼び出している Api.fetchUser は、（ざっくり書くと、）
以下のようなものが importされていると想定されます。

const fetchUser = (userId) => {
  return fetch(`http://example.com/users/${userId}`)
    .then(response => response.json());
};

あるAPIをリクエストしてから、そのレスポンスが返るまでというのも、一般的には時間のかかる処理ですから、

何かIO系の時間のかかる処理

の一例になっています。

loading...などと表示する

についてですが、APIをリクエストして、その結果が返ってくるまでの間にローディングアイコンを表示させる、というのはよくあるUIですね。先のsagas.js の例でこれをやろうとすれば、

• redux state にAPIリクエスト中を示すフラグを持っておく。
• ユーザー情報取得をリクエストするというアクション（USER_FETCH_REQUESTED）が発行されたときに、このフラグを true にする。
• APIが成功(USER_FETCH_SUCCEEDED)した、あるいは失敗(USER_FETCH_FAILED)したときに、このフラグをfalseにする。
• 上記のようにリデューサを実装して、APIのリクエスト中フラグをpropsで受け取りたいReactコンポーネントをReduxに connectする。
• このフラグが true のときは、このコンポーネント内のどこかに

loading...などと表示する

ように render させる。

というように作ることになると思います。

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

Comments

[退会済みユーザー]

わかりやすい解説ありがとうございました。
参考にさせていただきます

[jun68ykt]

ご返信ありがとうございます。
もしよければ、以下

https://github.com/jun68ykt/saga-and-router4

にて、redux-saga でAPIのリクエストとレスポンスの処理をさせる、
簡単なサンプルを作っていますので、redux-sagaを使った非同期処理の
一例としてご覧頂ければと思います。

このサンプルでは、

・貴殿のブログの7月7日の投稿で取り上げられている Ducksパターンを使っています。

・APIのリクエスト後、レスポンスが返ってくるまでの間、ローディングアイコンを表示させます。

・APIの結果に応じた画面遷移のために react-router を使っています。

なお、上記のGitHubに上げたコードの解説を、Qiitaの投稿

Reactサンプル：redux-sagaとreact-router v4でWebAPIの結果に応じて画面遷移させる。
（前編） https://qiita.com/jun68ykt/items/f2dc1f7c076c76188834
（後編） https://qiita.com/jun68ykt/items/541cc8247900e126ac5b

で書きましたが、貴殿のブログを拝読して、普段からreact、 redux に触れて
いらっしゃるようですので、解説を読まなくてもソースをすぐに読めると思います。

参考になれば幸いです。

[退会済みユーザー]

これは！！！
ありがとうございます！！
すごく求めていたものです。
参考にさせていただきます。
親切にありがとうございました。

Answer 2

ご理解は、間違ってないと思います。

非同期処理の結果が、ひたすらstoreに反映されるだけのシンプルな仕組みであれば、redux-sagaは必要ないかもしれません。

あるAPI呼び出しの結果を判定して、次にディスパッチするアクションが変わる、ような仕組みが必要な場合は、redux-sagaのようなものを利用すると、扱いやすいと思います。

非同期処理の繋がりをコントロールしやすい、という感じでしょうか。