I talked about Redux(https://github.com/rackt/redux) on React.js meetup #2, 8 Sep 2015.
![Introduction to Redux](https://cdn-ak-scissors.b.st-hatena.com/image/square/87a8ce19763ad4dee75f34e152b15a347a375034/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F55466701bc0f44e2831468b22ee66736%2Fslide_0.jpg%3F5218224)
Redux アーキテクチャは 厳密な一方向性データフロー 周りを解決するものです。 これはアプリケーション内におけるすべてのデータが同じライフサイクルパターンに従うことを意味していて、アプリのロジックがより予測可能な、理解がしやすいものになるということです。また、データの正規化を促進するので、気づかないうちにまったく同じだが独立したコピーが複数あるといったようなことがなくなります。 もしまだ納得していないようなら、動機 と Flux の事例 を読んでみてください。一方向性データフローに賛同する思わず引き込まれるような主張があります。 Redux は Flux ではありません が、同一の重要な利益をもたらします。 Redux アプリにおいてデータライフサイクルは以下の四つのステップに従います。 store.dispatch(action) を 呼び出します 。 アクション は 何が起きたか
概要 reduxでactionのテストをしたく、reducerをモックしてactionをテストするという方針を以下の記事に書いた。 React+ReduxのAction、Reducerを個別にテストする - Qiita しかし、これだと、asyncな関数の終了タイミングを担保できていないので、別の方針でテストすることにした。 方針 reduxのドキュメントを参考にする。 Writing Tests | Redux asyncなactionは以下のとおりである。 import { REQUEST, REQUEST_SUCCESS, } from 'constants'; // リソース管理はsuperagent import request from 'superagent'; function request() { return { type: REQUEST, }; } functio
背景 の続き。 ※上の記事書いた時はreduxの1系はまだrcだったし、react-reduxも0.2とかそんなんだったのに、気がついたらrc取れてるは2系になってるとか動きが早すぎです。 今回は追加フォームの動きを実装してみた。 やりたいこと 追加ボタンを押した時点で見た目上のリストに反映し、裏で非同期での追加処理が終わったらサーバ側から取得したIDをstoreに反映させる。 実装 前回の記事と同様に、追加処理を見た目上の追加とサーバとの同期処理完了の二つのactionに分割します。非同期actionについては、前回の記事でも書いた通りredux-thunkを使って実現しています。 export const ADD_TODO = 'ADD_TODO'; function addTodo(todo) { return { type: ADD_TODO, todo: todo }; } ex
夏休みの自由研究と言うことでreact+reduxを触ってみたのでその記録。 成果物 まだ全然完成してないけど、とりあえずここにコードは置いてみた。 https://github.com/hokuma/react-redux-async-sample 一覧表示(動く) 追加フォーム ぐるぐる出す 辺りまではやりきりたい。 フロント技術の進化そのものにキャッチアップしながらのためいろいろ微妙なコードはあるけれど、追々きれいに(なったらいいなー)。 使ったもの(主だったもの) react:https://www.npmjs.com/package/react redux:https://www.npmjs.com/package/redux react-redux:https://www.npmjs.com/package/react-redux redux-thunk:https://www
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
2015-08-28 11:06 合成された初期状態ツリーの出力結果を追加 分割されたreducerの初期状態ツリー Reduxの原則の1つであるグローバルな状態ツリーがすべてのソースとなるという点。 理屈ではわかるんだけど、いくつかコンポーネントを作っていくと常に大きなツリーが渡されるってのがとても扱いづらく感じる。つまり、何かアクションを受け取ってそれを状態ツリーに反映させるとき、ほとんどのケースにおいてツリーの一部だけを更新して、それ以外はいじらないことが多いからだ。 Reduxリポジトリのasyncのサンプルコードを追っていくと、reducers/index.jsの部分がよくわからなかった。 他のサンプルだと初期状態ツリーは定数として定義してreducerのデフォルト引数に指定していることが多かったが、asyncではまずそれがない。 そしてなにより状態ツリーはグローバルなものが1つ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く