tyoshikawa1106のブログ

- Force.com Developer Blog -

React:Reduxのサンプルコードを試してみました

Reactで開発するときですが、FluxとかReFulxとかReduxとかいろいろな開発手法が用意されています。何から始めればいいのか...という問題を解決できるベストプラクティス的なサンプルコードがもっと手に入らないかなと思っていたところ、Reduxのサイトにサンプルコードが公開されていたので試してみました。

f:id:tyoshikawa1106:20160516120848p:plain

Read Me | Redux

IntroductionのExamplesのメニューからコードのダウンロードと実行方法についての説明を確認できます。
f:id:tyoshikawa1106:20160516121227p:plain


用意されたデモアプリは以下のとおりです。

  • Counter Vanilla
  • Counter
  • Todos
  • Todos with Undo
  • TodoMVC
  • Shopping Cart
  • Tree View
  • Async
  • Universal
  • Real World


それぞれにgit cloneのコマンドから紹介がありましたが、全部共通のURLでした。

$ git clone https://github.com/reactjs/redux.git


examplesフォルダにまとめられています。
f:id:tyoshikawa1106:20160516121745p:plain

Counter Vanilla

cd redux/examples/counter-vanilla
open index.html

クリック時にカウントを+−するデモアプリ。奇数のときだけ実行するIF判定と非同期処理(Async)処理も確認できるみたいです。
f:id:tyoshikawa1106:20160516122056p:plain

Counter

cd redux/examples/counter
npm install
npm start

open http://localhost:3000/


たぶん、Counter Vanillaと同じ。こっちはlocalhost上で動かすことができます。
f:id:tyoshikawa1106:20160516122518p:plain

Todos

cd redux/examples/todos
npm install
npm start

open http://localhost:3000/

ToDoアプリです。個人的に一番欲しいサンプルコード。
f:id:tyoshikawa1106:20160516122800p:plain

Todos with Undo

cd redux/examples/todos-with-undo
npm install
npm start

open http://localhost:3000/

ToDoアプリですが、操作の取り消し(Undo)などを実行できます。
f:id:tyoshikawa1106:20160516123047p:plain

TodoMVC

cd redux/examples/todomvc
npm install
npm start

open http://localhost:3000/

おしゃれなToDoアプリ。
f:id:tyoshikawa1106:20160516123400p:plain

Shopping Cart

cd redux/examples/shopping-cart
npm install
npm start

open http://localhost:3000/

ショピングカートアプリ。商品の追加と選択済み商品の金額の計算などの処理が確認できそうです。
f:id:tyoshikawa1106:20160516124041p:plain

Tree View

cd redux/examples/tree-view
npm install
npm start

open http://localhost:3000/

Tree表示。子階層の追加や削除などの処理を確認できます。
f:id:tyoshikawa1106:20160516124339p:plain

Async

cd redux/examples/async
npm install
npm start

open http://localhost:3000/

非同期で最新情報を取得する・・的な処理を確認できるっぽいです。
f:id:tyoshikawa1106:20160516124612p:plain

Universal

cd redux/examples/universal
npm install
npm start

open http://localhost:3000/


一番最初のカウントアップと同じ・・と思ったのですが、これはサーバ側でレンダリングする処理のサンプルとなっているみたいです。
f:id:tyoshikawa1106:20160516125049p:plain

Real World

cd redux/examples/real-world
npm install
npm start

open http://localhost:3000/

なんかすごいやつ。
f:id:tyoshikawa1106:20160516125655p:plain

もっと勉強したいときに


Reduxサイトのサンプルコードはこんな感じでした。examplesフォルダの中のアプリだけコピーして動かすこともできたので、ビルド周りの設定に悩まずにそのまま利用できそうでした。
f:id:tyoshikawa1106:20160516130049p:plain