りだっくすさが(redux-saga)に入門する - wadackel.me
Web アプリを構築したくて久し振りに React を触ってみると、前に少し触っていたのにすっかり忘れてしまっていました。圧倒的に記憶力が低いので、継続的に触っていないと中々覚えられません…。 今だと Angular2 がグイグイ来てたりしてますが、それよりも一度触ったことのある React+Redux を使った方が学習コストを抑えられるな、という訳で再度勉強中です。 改めて色々と調べていると、redux-sagaという Redux の Middleware が非同期処理を書きやすく出来るぞ！との事だったので、まずはシンプルなカウンターサンプルの実装をして感じを掴んでいきたいと思います。 最後の 参考 にもあげていますが、そもそも redux-saga とは一体何者なんだ？というところにおいて、以下の記事が大変参考になりました。 redux-saga で非同期処理と戦う - Qiita ま
Redux CRUD Saga (redux-saga) · GitHub
crud-saga.js import { takeLatest } from ' redux-saga ' import { call , put } from ' redux-saga/effects ' import fetch from ' isomorphic-fetch ' import * as actions from ' ./modules/grid ' import * as api from ' ../lib/api ' export function * fetchGrids ( action ) { try { const grids = yield call ( api . GET , ' grids ' ) yield put ( actions . fetchGridsSuccess (grids)) } catch (error) { yield put
イベントとコマンド
bouzuya @bouzuya コマンドとイベントを別のバスにして、イベントからコマンドに変換する処理を書くと良いかも。その場合はいまハンドラーとして扱っているものをイベントハンドラーとコマンドハンドラーに分けなきゃいけないんだよな。 2016-05-18 09:04:51 bouzuya @bouzuya イベントとコマンドは厳密には別物で、#boajs 的にもコマンドの結果として次のコマンドを返すのは、コマンド間の結合度を高めるので不適切なんだよね。あくまでコマンドは結果としてイベントを流して、そのイベントをコマンドに変換する層を設けるほうが望ましい。 2016-05-18 09:08:24 bouzuya @bouzuya コマンドとイベントを区別して扱うと2系統のバスを扱わないといけないので、両方をメッセージとして束ねて1系統のメッセージバスとして扱うのが現実的だと思っている。ま
Confusion about Saga pattern
In this article I share my confusion and findings about Saga pattern. I’m not an expert in Saga or any other mentioned concepts. Recently I’ve been looking into a popular JavaScript library for handling complex asynchronous data flows in React.js applications built with Redux state management library which is called redux-saga. The way it works is very much similar to CSP (Communicating Sequential
redux-sagaで非同期処理と戦う - Qiita
はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-promiseあたりでしょうか。Reduxに限定しないのであればreact-side-effectというものもあります。こちらはTwitterのモバイルウェブ版で使われていますね。どれを使っても非同期処理が可能になりますが、それはあくまで道具であって、設計の
意地でもReduxを使う - Qiita
[更新: 2016/05/12] react-transportを公開、サンプルコードをredux-saga v0.10.2に対応 本稿は2016年4月19日に開催されたMeguro.es #3にて同名のタイトルで発表した飛び込みLTのフォローアップになります。こちらがわかりにくいLT資料です。 発表ではReduxが導入しにくい状況でも使っていく方法はあるよ、という内容で具体的な利用例をデモをしました。しかし、その背景にはもう少し大きな問題意識があって、「食わず嫌い」とか「Redux疲れ」になる前にちょっと落ち着いてReduxについて冷静に考えてみようよ、ということです。LTではその辺をすっ飛ばしているので資料の構成と大きく異なりますが、Reduxの導入を検討している方のヒントになればと思います。 誤解を招く「React + Redux」という書き方 Reactの導入事例が増えてきた昨今、
javascript - Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await - Stack Overflow
There is a lot of talk about the latest kid in redux town right now, redux-saga/redux-saga. It uses generator functions for listening to/dispatching actions. Before I wrap my head around it, I would like to know the pros/cons of using redux-saga instead of the approach below where I'm using redux-thunk with async/await. A component might look like this, dispatch actions like usual. import { login
Reduxでコンポーネントを再利用する - Qiita
Reduxはとりあえず使えるようになった後の情報が少ないように感じています。よく出回っているサンプルコードは「Real World 〜」のような名前がついていたとしても、あくまで雰囲気を味わうために用意されたものに毛が生えた程度で、現実に起こる問題に対する回答や指針を示しているわけではありません。業務で使うことを検討するのであれば、プロダクトの成長と共にどうやってスケールしていくかイメージできないと導入に踏み切れないですよね。本稿ではサンプルコードより大きな規模で開発していくために、Reduxにおけるコンポーネントの再利用について紹介します。 実現したいこと コンポーネントの再利用によってどのようなことを実現したいのかイメージしてもらうため、馴染みのあるアプリケーションの機能を具体例として挙げてみます。 Gmailで名前にマウスオーバーしたときに出るプロフィール情報 プロフィール画像の表示
redux-sagaでズンドコキヨシ - Qiita
若干乗り遅れた感がありますが、redux-sagaでズンドコキヨシをやりました。 redux-saga というのは redux で非同期処理を扱うためのMiddlewareで、平たく言うとkoaみたいにGenerator関数を使って非同期処理を同期処理のようなスタイルで書き下せます。思いつきの遊び半分で始めたズンドコキヨシが、正直ここまで redux-saga の本質に迫るサンプルになるとは予想もしていませんでした。redux-saga 自体の詳しいは後日別の記事で解説するとして、redux-saga が秘めているパワーを少しでも感じ取ってもらえたらと思います。 デモはこちら このデモにはredux-devtoolsが組み込まれています。右側の黒っぽいドックがそれです。送り出されたActionのログ表示、 Reset で初期状態に戻す、 Commit で現在の状態をスナップショットして、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Solving Sync/Async dispatch tension with a global re-entrant lock · Issue #235 · redux-saga/redux-saga
Release v0.10.0 · redux-saga/redux-saga