redux-sagaを用いたReact/Reduxアプリケーションにおけるデータ通信の実現事例

  setTimeout(() => {
    console.log("Hello, World!")
  }, 500)

  // ユーザーIDが0001の人の認可情報をauthサーバーへ
  const userId = '0001';
  authClient.getAuth({'id': userId}, (authErr, authResponse) => {
    if(authErr) {
      throw new Error("認可エラー")
    }
    const {userId, userName, userRoll} = authResponse
    // DBから検索履歴を取得
    dbClient.getSearchHistory({'id': userId, 'roll': userRoll}, (dbErr, dbResult) => {
      if(dbErr) {
        throw new Error("DBエラー")
      }
      const { histories } = dbResult
      // 情報をReducerに渡す場合は、ここでActionをdispatch
      // 検索結果一覧からリコメンド対象を計算
      recommendClient.getRecommend({histories}, (recErr, recResult) => {
        ...
      }) 
    })
  })

  const getAuthAsync =　(client, request) => {
    const { userId } = request
    return new Promise((resolve, reject) => {
      client.getAuth({'id': userId}, (err, res) => {
        if(err) {
          reject(err)
          return
        }
        resolve(res)
      })
    })
  }

  const getSearchHistoryAsync = (client, condition) => {
    return new Promise((resolve, reject) => {
      client.getSearchHistory(condition, function(err, result) {
        if(err) {
          return reject(err)
        }
        resolve(result)
      })
    })
  }

  const getRecommendAsync = (client, request) => {
    return new Promise((resolve, reject) => {
      ...
    })
  }

  // 一連の処理をメソッドチェインで記述した場合
  const result = getAuthAsync(authClient, {'userId': '0001'})
    .then((authResult) => {
      getSearchHistoryAsync(dbClient, {'userId': authResult.id, 'roll': authResult.userRoll})
        .then((dbResult) => {
          getRecommendAsync(recClient, {'histories': dbResult})
            .then((result) => {
              ...
            })
            .catch((err) => { ... })
        })
        .catch((err) => { ... })
    })
    .catch((err) => {
      throw new Error(err)
    })

  // 一連の処理をasync/awaitで記述した場合
  try {
    const authResult = await getAuthAsync(authClient, {'userId': '0001'})
    const dbResult = await getSearchHistoryAsync(dbClient, {'userId': authResult.id, 'roll': authResult.userRoll})
    const recResult = await getRecommendAsync(recClient, {'histories': dbResult})
    ...
  } catch (err) {
    throw new Error(err)
  }

function* handleGetAuthStart() {
  while (true) {
    // take で Action の待ち受け
    // GET_AUTH_START_EVENT がdispatchされると処理が進む
    const action = yield take(GET_AUTH_START_EVENT)
    const { userId } = action.payload
    // call で非同期処理を呼び出し、終了まで待つ
    const { userName, userRoll, error } = yield call(
      getAuthAsync,
      authClient,
      {
        userId
      }
    )

    // put で次の Action をdispatchする
    if (error) {
      // 非同期処理失敗時のActionをdispatch
      yield put(getAuthFailureEvent(error))
    } else {
      // 非同期処理成功時のActionをdispatch
      yield put(getAuthSuccessEvent(userId, userName, userRoll))
      // 次の非同期処理呼び出しのActionをdispatch
      yield put(getSearchHistoryStartEvent(userId, userName, userRoll))
    }
  }
}

function* handleGetSearchHistoryStart() {
   while (true) {
    // take で Action の待ち受け
    // GET_SEARCH_HISTORY_START_EVENT がdispatchされると処理が進む
    const action = yield take(GET_SEARCH_HISTORY_START_EVENT)
    const { userId, userRoll } = action.payload
    // call で非同期処理を呼び出し、終了まで待つ
    const { histories, error } = yield call(
      getSearchHistoryAsync,
      dbClient,
      {
        userId,
        userRoll
      }
    )

    // put で次の Action をdispatchする
    if (error) {
      // 非同期処理失敗時のActionをdispatch
      yield put(getSearchHistoryFailureEvent(error))
    } else {
      // 非同期処理成功時のActionをdispatch
      yield put(getSearchHistorySuccessEvent(userId, userName, userRoll))
      // 次の非同期処理呼び出しのActionをdispatch
      yield put(getRecommendStartEvent(userId, userName, userRoll))
    }
  }
}

function* handleLoginDone() {
  while (true) {
    const action = yield take(LOGIN_DONE_EVENT)
    const { userId } = action.payload
    yield all([
      call(handleBackend1Connect, connectionId),
      call(handleBackend2Connect, connectionId),
      call(handleBackend3Connect, connectionId)
    ])
  }
}

function createEventChannel(prom, connectionId, state) {
  return eventChannel(emit => {
    prom.on("data", function(msg) {
      // 受信したイベントに応じた Action を emit する
      switch (msg.message.type) {
        case BackendMessage.TYPE_UPDATE_USER_LIST:
          emit(getUserListStartEvent(state.accountState.loginUser.userId))
          break
        case BackendMessage.TYPE_FORCE_LOGOUT:
          emit(forceLogoutStartEvent(state.accountState.loginUser))
          break
        default:
          Logger.info("not supported message: " + msg.message.type)
      }
    })

    prom.on("error", function(error) {
      emit(connectFailureEvent(error))
    })

    const unsubscribe = () => {
      prom.on("end", function() {
        Logger.info("disconnected.")
      })
    }
    return unsubscribe
  })
}

function* watchBackendConnectSuccess() {
  while (true) {
    // take作用でBACKEND_CONNECT_SUCCESS_EVENTを待ち受けます
    // BACKEND_CONNECT_SUCCESS_EVENTはバックエンドサーバとのgRPCのコネクションが
    // 確立されたときにdispatchされるActionです
    const action = yield take(BACKEND_CONNECT_SUCCESS_EVENT)
    const connectionId = action.payload.connectionId
    // gRPC のサーバstreaming オブジェクトを取得
    const prom = yield call(BackendApi.receiveMessage, connectionId)
    const state = yield select()
    try {
      // PUSH通知を受け取るための eventChannel を作成
      const channel = yield call(createEventChannel, prom, connectionId, state)
      while (true) {
        // channelでイベント受信時に emit した Action を受け取る
        // BACKEND_DISCONNECT_SUCCESS_EVENT がdispatchされた場合は disconnectSuccessAction を受け取る
        const { disconnectSuccessAction, newAction } = yield race({
          disconnectSuccessAction: take(BACKEND_DISCONNECT_SUCCESS_EVENT),
          newAction: take(channel)
        })

        // Disconnect が成功した場合は channel を close して、loop を離脱
        if (disconnectSuccessAction) {
          channel.close()
          break
        } else {
          yield put(newAction)
        }
      }
    } finally {
      // コネクション切断時、ここに到達する。
      Logger.info(
        "escaped from while loop: createBackendEventChannel in watchBackendConnectSuccess"
      )
    }
  }
}