react-redux-todo-tutorial

目的

今から始める React Redux TODO アプリハンズオン の資料です。 React の大まかな概要から Redux で SPA を実際に作成するまでを体験してみましょう。

目次

• 00: はじめに
• 01: React を始める (create-react-app を使った方法)
• 02: Todo List を Redux なしで作ってみよう
• 03-01: Todo List に Redux を導入しよう
• 03-02: Todo List に Redux を導入しよう2

React の概要

React は facebook が開発した ui ライブラリ

特徴

• 旧来の DOM 操作による状態管理を props や state で抽象化
• UI パーツをコンポーネントごとに管理するのが得意
• learn once write everywhere

知られざる React 誕生の歴史

• 元々は XHP という facebook が開発していた PHP のエクステンション
• 主に Cross Site Scripting を防ぐための仕組み
• React.js は XHP をブラウザ側で処理できるように js にしたもの
• (XHP はサーバー側とのラウンドトリップが多く発生する問題があったため)

個人的な考察ですが、仮想DOMの出発点が XSS 防止にあったと考えると、開発者がユーザーの DOM へのアクセスを防ぐために、Javasciript で DOM を作ればいいじゃないかという発想は、面白いと思う。 https://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/

Redux の概要

SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （個人的解釈です） もともとは Flux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は 「Reducer」 + 「Flux」 で 「Redux」だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015 (Redux で作ったスライドで発表してるところがクールです。sublime text を使っていて途中でアクシデントが起こるところがネタ的に面白いです。)

全体的なアーキテクチャとフローは以下の図で表せます。[引用元: Redux. From twitter hype to production

1. View でユーザーがクリックするなどの動作でイベントを発行
2. Actions でイベントをアクションとし受け渡す
3. Actions の結果を Reducer で 元の State と合成する
4. state を View に返して、View を更新する (2.1 受け取ったアクションに応じて Middleware で API コールなど非同期のリクエストを送る) (2.2 API のレスポンスを Middleware で受け取る) (2.3 受け取ったレスポンスで3.を行う)

Middleware が噛まない場合もありますが、基本的には View -> Actions -> Dispatcher -> Reducer -> View でデータを更新すると言う単一の流れです。