概要 sagaを複数のファイルで書いといて一つのrootSagaにまとめて使うなら、各ファイルで、effectをexportし、rootSaga内で、yield allすればOK 背景 reducerは複数のファイルで個々に管理して、combineReducersでまとめてexportするのが主流 sagaでも同じように、関心事に複数のファイルで分けて管理して、まとめてexporとして使いたい 環境 redux-saga: 0.16.0 手順 item.jsとregsiter.jsでsagaを用意し、各ファイル毎にeffetctを配列にまとめてexportする index.jsでeffetcの配列をimportしてyield allでrootSagaにまとめる item.jsとregsiter.jsでsagaを用意し、各ファイル毎にeffetctを配列にまとめてexportする ポイントは
課題 redux-saga でテキストボックスなどの値が変更されるたびにバリデーションを実行したい時、アクションが発行されすぎて入力がガックガクになってしまうことがありますよね。 (止まっているように見えますがgifアニメです) コードはこんな感じです。 import { all, takeLatest, select, call, put } from 'redux-saga/effects' export function* validateProduct(key) { const product = yield select(productSelector) const messages = yield call(productValidator, product, key) // バリデーションして yield put(finishValidate(key, messages))
概要 post後のパラメータidを取得して、redux-sagaを呼び出すとき、(id) => {this.props.history.push(/items/${id})としてcallbackをaction.payloadで渡して、実行すればOK 使いどころ 新規アイテム作成ダイアログにおいて、アイテム名入力後に自動的にアイテム表示画面に遷移させる ユーザー登録画面において、ユーザー作成後に自動的にユーザー情報表示画面に遷移させる 実現したいページ遷移イメージ (今回のコードに色々くっつければ、こんな感じのページ遷移になるよというイメージ) 環境 react-router: 4.2.0 react-router-dom: 4.2.2 redux-saga: 0.16.0 react-routerでhisotry.pushができるようになっている。参考 (サーバー側はrailsのwebpa
Data Flow with Redux and Redux-Saga (proposal)I really love the principles I learned after switching from AngularJs to React and its Flux architecture. At the moment I’m working on a real world application for another company. After my first React-Native App with Redux, I decided to add Redux-Saga to the mix. Complex transactions and side effects should be readable and easy to maintain too. This b
若干乗り遅れた感がありますが、redux-sagaでズンドコキヨシをやりました。 redux-saga というのは redux で非同期処理を扱うためのMiddlewareで、平たく言うとkoaみたいにGenerator関数を使って非同期処理を同期処理のようなスタイルで書き下せます。思いつきの遊び半分で始めたズンドコキヨシが、正直ここまで redux-saga の本質に迫るサンプルになるとは予想もしていませんでした。redux-saga 自体の詳しいは後日別の記事で解説するとして、redux-saga が秘めているパワーを少しでも感じ取ってもらえたらと思います。 デモはこちら このデモにはredux-devtoolsが組み込まれています。右側の黒っぽいドックがそれです。送り出されたActionのログ表示、 Reset で初期状態に戻す、 Commit で現在の状態をスナップショットして、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く