Reactで開発するときですが、FluxとかReFulxとかReduxとかいろいろな開発手法が用意されています。何から始めればいいのか...という問題を解決できるベストプラクティス的なサンプルコードがもっと手に入らないかなと思っていたところ、Reduxのサイトにサンプルコードが公開されていたので試してみました。
IntroductionのExamplesのメニューからコードのダウンロードと実行方法についての説明を確認できます。
用意されたデモアプリは以下のとおりです。
- 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フォルダにまとめられています。
Counter Vanilla
cd redux/examples/counter-vanilla open index.html
クリック時にカウントを+−するデモアプリ。奇数のときだけ実行するIF判定と非同期処理(Async)処理も確認できるみたいです。
Counter
cd redux/examples/counter npm install npm start open http://localhost:3000/
たぶん、Counter Vanillaと同じ。こっちはlocalhost上で動かすことができます。
Todos
cd redux/examples/todos npm install npm start open http://localhost:3000/
ToDoアプリです。個人的に一番欲しいサンプルコード。
Todos with Undo
cd redux/examples/todos-with-undo npm install npm start open http://localhost:3000/
ToDoアプリですが、操作の取り消し(Undo)などを実行できます。
TodoMVC
cd redux/examples/todomvc npm install npm start open http://localhost:3000/
おしゃれなToDoアプリ。
Shopping Cart
cd redux/examples/shopping-cart npm install npm start open http://localhost:3000/
ショピングカートアプリ。商品の追加と選択済み商品の金額の計算などの処理が確認できそうです。
Tree View
cd redux/examples/tree-view npm install npm start open http://localhost:3000/
Tree表示。子階層の追加や削除などの処理を確認できます。
Async
cd redux/examples/async npm install npm start open http://localhost:3000/
非同期で最新情報を取得する・・的な処理を確認できるっぽいです。
Universal
cd redux/examples/universal npm install npm start open http://localhost:3000/
一番最初のカウントアップと同じ・・と思ったのですが、これはサーバ側でレンダリングする処理のサンプルとなっているみたいです。
Real World
cd redux/examples/real-world npm install npm start open http://localhost:3000/
なんかすごいやつ。
もっと勉強したいときに
Reduxサイトのサンプルコードはこんな感じでした。examplesフォルダの中のアプリだけコピーして動かすこともできたので、ビルド周りの設定に悩まずにそのまま利用できそうでした。