本記事はReduxのチュートリアルであり、Reactについての詳しい説明はここでは扱わない。 基本的にはこちらのビデオチュートリアルをベースに書いている。英語に問題がなく、ビデオが嫌いでなければこちらを参照した方が正直わかりやすいかと思う。 下準備 gitとNodeはインストール済みであるとする。まずはターミナルでスターターキットをダウンロードする。このスターターキットにはReact、Webpack、babelが含まれている（Reduxは含まれていない）。 $ git clone https://github.com/alicoding/react-webpack-babel react-counter $ cd react-counter $ npm install $ npm run start http://localhost:8888/にアクセスして正しく表示されれば成功。ターミナ
ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS
FluxやReduxがまた分からなくなったので、個人的なまとめをしました。 「これ間違ってるぜ！」ってのがあればコメント等でご指摘していただけると嬉しいです。 また何か気付きがあればちょこちょこ更新入れることもあります。 Fluxって？ Facebookが提唱しているアーキテクチャで、JavaScriptのデータの流れを分かりやすく整理するために使われます。 JavaScriptはイベントドリブンなため、様々なデータの流れがあり複雑化しやすくなっています。 そのためFluxではその流れを一方向にまとめよう！といったことをやっています。 Dispatcherを通して状態を変化させていく様子はデザインパターンのオブザーバーパターンと同じような形ですね。 基本的には以下の様な流れです。 またユーザーの行動によってViewから新たにActionを発行し、Dispatcherへと伝搬させることも出来
上杉周作さんをゲストに迎えて、React, Redux, Facebook, ブートキャンプ, SF住宅事情、Airbnb, Uber, レッシグなどについて話しました。 Show Notes React.js Introduction For People Who Know Just Enough jQuery To Get By JS Bin - Collaborative JavaScript Debugging ReactEurope IKEA or Death Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015 Redux Cycle.js A cartoon guide to Flux — Code Cartoons Joe Hewitt Javelin (JS) HHVM
背景 の続き。 ※上の記事書いた時は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
Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more. The Redux DevTools make it easy to trace when, where, why, and how your application's state changed. Redux's architecture lets you log changes, use "time-travel debugging", and even send complete error reports to a server.
This post is a non-exhaustive quick overview of the so-called “unidirectional data flow” architectures. Not meant to be taken as a beginner tutorial, but rather as an overview of their differences and peculiarities. At the end, I’ll introduce a new architecture which deviates significantly from the others. This post assumes client-side Web UI frameworks only. TERMINOLOGY It would be confusing to t
Reducerについて http://rackt.github.io/redux/docs/basics/Reducers.html storeのstateを変えるための関数 現在のstateとactionを受け取り、actionを元に新しいstateを作成して返す。 最小だとstate全体を1つのreducerで更新するようにする. こんな感じ function todos(state, action) { switch (action.type) { case INPUT: return action.input default: return state } } } stateの構成が複雑になって来た場合など、stateのプロパティー毎に reducerを割り当てて値を更新するようにする場合はこんな感じで書くっぽい function todoApp(state = {}, actio
JSer.info #241 - Fluxのように単方向データの流れを行うフレームワークであるRedux 1.0.0がリリースされました。 Release v1.0.0 · rackt/redux Reduxのコンセプトについては作者が以前The Evolution of Flux Frameworks — Mediumという記事で書いています。 ざっくり書くと、Stateを管理するコンテナ(reduxオブジェクト)を提供することでFluxのActionCreatorとStoreにあたるものをただの関数として書けるようにして、状態の変化が予測できるようにすることを目的としています。 ドキュメントや人気のFluxフレームワークReduxをさわってみた - マルシテイアは月の上などを見てみると特徴や、どういう制約を元に作られているのかが分かるかもしれません。 Read Me | Redux T
reduxの思想 統一されたデータストア アプリケーションの状態は1つのstoreオブジェクトが管理する stateはリードオンリー sateを変化させる唯一の方法はactionを発行すること 状態の遷移はただの関数によって行う stateを変更するための処理はreducersに定義します fluxの登場人物 actionCreator 最終的にactionを作るための処理 ajaxリクエストなどの処理を行い、その結果をのせたactionを作成する 例) 例えば、ajaxでコメント一覧を取得して { actionType: UPDATE_COMMENTS, comments: response.body.comments } のようなactionを作る action アプリケーションで何が起きたのかとそれに付随するデータ actionTypeと任意のデータを持つ単なるObject acit
Here you’ll find essays and tips on the business and practice of software and website development: website design and promotion, marketing, object oriented design, law, business, cross-platform development, refactoring, C++ programming, low-level debugging, and writing software for both Mac OS X and the Classic Mac OS. What’s New? Bookmark this page and check back from time to time to find new pro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く