ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

thumbnail

Labels:  JavaScript 投稿者:mori-dev

redux アプリで定期実行処理を書くには

です。redux アプリで redux-saga を使って定期実行処理を書いてみました。

要件

redux-saga で以下を実装する方法を検討しました。

  • 定期的にステート(本稿では reducer で分割したストア)の値をチェックして何かする
  • 定期的に API コールを行い、ストアを更新する
  • アプリが起動している間ずっとではなく、開始条件と終了条件をつけたい。
  • 終了条件は複数ある

答案

定期的にストアの値をチェックして何かするの実装例を書いてゆきます。redux-saga の公式ドキュメントの cancel の説明が参考になります。これをみつけられるかがキモかと思います。

ActionTypes

 

_TRIGGER、_STOP、_EXEC、_END の4種類を一組として、CHECK_ ではじめるルールとしました。

  • ActionTypes.CHECK_SAMPLE_TRIGGER
  • ActionTypes.CHECK_SAMPLE_STOP
  • ActionTypes.CHECK_SAMPLE_EXEC
  • ActionTypes.CHECK_SAMPLE_END

以下の2つは redux-saga で実行するアクションのアクションのタイプです。

  • ActionTypes.CHECK_SAMPLE_EXEC //=> これがビジネスロジックの開始合図
  • ActionTypes.CHECK_SAMPLE_END

以下の2つは redux-saga 以外で実行するアクションのタイプです。

  • ActionTypes.CHECK_SAMPLE_TRIGGER //=> saga への定期実行開始依頼
  • ActionTypes.CHECK_SAMPLE_STOP //=> saga への定期実行終了依頼

アクション

 

アクションの例です。

特徴はありません。

リデューサー

 

リデューサーは必要ないので作りません。

saga

 

単純な redux-saga の例です。ActionTypes.CHECK_SAMPLE_STOP と ActionTypes.LOGOUT_OK の2つのアクションを終了条件としました。

ミドルウェア

 

私たちのプロジェクトでは、ビジネスロジックはミドルウェアに書いています。以下は単純なミドルウェアの例です。
▼ src/middleware/periodic_inspections/sample.js

ミドルウェアでは次のようにステートを取り出せます。

const stateName = store.getState().stateName;

テスト

 

redux-saga の基本的なテストの例です。

「定期的に API コールを行いストアを更新する」処理も似たようなものです。

 

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。

PHPエンジニア
Rubyエンジニア
フロントエンドエンジニア
インフラエンジニア
新卒エンジニア
その他採用情報

関連記事

thumbnail
react-redux v5.0.0でredux-form, material-uiを併用時、フォームの日本語入力が1文字目で確定される問題の対策

森です。しばらく日々のこまごまとした課題とその解決をブログに書き残しておくことにしました。 現象 redux-form の入力欄(Field)を material-ui(TextField)で作成しています。react-redux の v5.0.0-rc.1 …

thumbnail
SEOフレンドリーな無限スクロールの実装方法

飲み物は常温派のota(@purratto)です。自動販売機で常温のものも販売してくれればいいのになあ、と常々思っています。 ランサーズストアでSEOフレンドリーな無限スクロールをjQueryで実装しました。 サンプル向けに一部修正したコードを公開します。参考 …

thumbnail
React × Redux で action 発行時に確認ダイアログを挟む middleware の実装例

pookチームのtakepoです。 今回は、React × Redux でstateを変更する時にダイアログ等で確認表示を挟みたいときの良い方法をご紹介します。 その場合の例として、「ユーザーの情報を更新するとき、更新しても良いかを一度確認するダイアログ表示す …