質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • React.js

    827questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • React Native

    180questions

    React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

  • Redux

    111questions

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 266

cloudspider

score 70

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

 聞きたいこと

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

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

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

例えば、

  • PCのtwitterのようなアプリを作り、ツイート以外のところは一瞬で読み込んで、ツイートの部分の読み込みは時間がかかる
    →これは非同期処理にするべき

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

という感じでしょうか。

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

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

なのでしょうか。

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+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});
   }

の、上記2行目にも

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 させる。

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/12 16:15

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

    キャンセル

  • 2018/07/13 07:15 編集

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

    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 に触れて
    いらっしゃるようですので、解説を読まなくてもソースをすぐに読めると思います。

    参考になれば幸いです。

    キャンセル

  • 2018/07/13 11:12

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

    キャンセル

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    Reduxのstate構造について

     前提・実現したいこと React+Reduxの勉強でtrelloのようなTODOアプリを作成しています。 TODOアプリにはtrelloの形式のような構成にしていて、以下の3

  • 解決済

    Redux,containerのコードの意味について

    Reduxを学習中で、あるcontainer部分のコードの意味を解読中ですが分からない部分があるのでお助けいただきたいです。詳細はコード内に書きました、よろしくお願いします。 (u

  • 解決済

    redux component部分のコードの意味について

    reduxについて勉強中。 ユーザーのcsvファイルをアップロードする機能のページのコードを解読しています、 しかし解読不明なところがあるので助けていただきたいです。 詳細はコード

  • 解決済

    ReduxのReducerのリストの更新が上手くいきません

    React,Reduxでアプリを作っているのですが、stateのlistが上手く更新できません 先日の質問を参考にして、入れ子のリストを使ったreducerを実装しています。

  • 解決済

    React + Redux を使用したSPA実装の設計について

     はじめに 現在React+Reduxを使用したSPA を作成中です。 ここやFlux公式を読んでみると 「Storeは画面単位でなくドメイン単位でデータを保持する設計が良いよ

  • 解決済

    redux action実行後に次のaction

    reduxのactionについて質問なのですが action_Aを実行後にaction_Bを実行したいのですが(jqueryのdoneのような) このような場合どういう実装をしたら

  • 解決済

    reducerのfunctionを動かしたい(redux)

    こちらの質問で、Reduxを通してエラーモーダルを表示させるための質問をしたのですが、やはり上手くいかなかったので、再度質問させていただきます。  エラー onError

  • 解決済

    ReduxのapplyMiddleware内のdispatchについて

    applyMiddlewareのコードを見たのですが、わからないところがあります。 new Errorが入ったdispatchをmiddlewareAPIに入れて個々のミドルウェア

同じタグがついた質問を見る

  • React.js

    827questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • React Native

    180questions

    React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

  • Redux

    111questions