View
5.556
Download
12
Category
Preview:
Citation preview
0
React/Redux/Redux-Saga+サーバーサイドレンダリング
エスキュービズム・テクノロジー
Jun 17,2016S-cubism Technology Inc.
私のJavaScript遍歴(フレームワーク)
1
Prototype.js jQuery素 Backbone.js Knockout.js
1年のブランク
React Redux Redux-Saga
時代は変わっていた!
私のJavaScript遍歴(文法)
CoffeeScript ES5素 ES6 ES7
https://facebook.github.io/react/
古き良きWEBシステム
URL
HTML
サーバー ブラウザ
HTMLから”DOMツリー”を構築(DOM:Document Object Model)
ブラウザでの動的な処理
#1
#2
#3
#4
#5
jQuery(“#2”).after(jQuery(“#5”))
複数の操作が同時に発生したら?↓
DOMの状態管理が難しかった
DOM
手続き的から宣言的な処理へ
#1
#2
#3
#4
#1
#2
#5
#3
#4
state = [1, 2, 3, 4] state = [1, 2, 5, 3, 4] こうあるべきを定義
あとはよしなにDOMを構築してくれる
DOM DOM
仮想DOMによる変更検知
#1
#2
#3
#4
#1
#2
#5
#3
#4
state = [1, 2, 3, 4] state = [1, 2, 5, 3, 4]
仮想DOM 仮想DOM
仮想DOMを構築し、変更箇所を検知↓
変更箇所だけ本来のDOMに反映
Reactの文法(ES6版)
コンポーネントからDOMを構築
http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660
ReactDOM.render
仮想DOMを経由
データフロー
http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660
props props
props props
コンポーネントのライフサイクル
props
state
親コンポーネントから与えられるデータ
内部で持つ状態
Mounted
Update
Unmounted
setState()
setProp()
props, stateの変更を検知して描画
render()
Reactのコンパイル
http://www.pro-react.com/materials/appendixA/
汎用ビルドツール JS用コンパイラ
https://github.com/reactjs/redux
コンポーネント間で直接やり取り?
https://css-tricks.com/learning-react-redux/
MVC?
https://www.codementor.io/reactjs/tutorial/intro-to-react-redux-pros
モデルの変更がどのビューに影響を与えるか予測が難しい
https://css-tricks.com/learning-react-redux/
Reduxのデータフロー
Reduxの全体像
http://chentsulin.github.io/redux-intro/
タイマーの実装例
http://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas/
アクションの定義
actions.js
http://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas/
Reducerの実装
reducers.js
stateは直接編集せずコピーして編集する
状態遷移図で表すと・・
http://jaysoo.ca/2016/01/03/managing-processes-in-redux-
using-sagas/
Reactコンポーネントの実装
Dispatch
timer.js
タイマースタート
描画
Subscribe
ミドルウェア
loggerミドルウェアを使えば、以下のようなログを出力できる
http://chentsulin.github.io/redux-intro/
Redux-Saga
非同期のアクション
http://andrewhfarmer.com/react-ajax-best-practices/
Tick
タイマーコンポーネント
状態遷移が伝わるまでに遅延がある
timer.js
ビューの中に非同期処理が入り混じる
Redux-thunkミドルウェア
一つのアクションの中で非同期処理を記述タイマーはアクションの直後にスタート
actions.js
非同期処理の起点となるアクションが肥大化する
Redux-Sagaミドルウェア
STARTアクションが発生するまで処理は止まる
Generator
1秒待って、状態を参照
sagas.js
責務の分離
Reducerの責務 → アクションに対する状態遷移
Sagaの責務 → 複雑非同期な処理の指揮
もう少し複雑な例
http://yelouafi.github.io/redux-saga/docs/advanced/NonBlockingCalls.html
authorizeを参照(forkはノンブロッキング)
認証リクエスト処理の切り出し
補足:async/awaitとの違い
http://wecodetheweb.com/2016/01/23/handling-async-in-redux-with-sagas/
ES7でasync/awaitが提案されているが・・
ここのfetchは実行されてしまうredux-sagaではfetchの命令を待つことができる
サーバーサイドレンダリング
JSアプリのSEO問題
http://www.theseotailor.com.au/beginner-seo/introduction-to-seo/
サーバーサイドの処理フロー
リクエストを受け取る
Reduxストアの初期化
ユニバーサルなルーティング
Redux-Sagaの起動
ユニバーサルなフェッチ
Reactコンポーネントの文字列化
Reduxストアの文字列化
レスポンスを返す
(React-Router)
(Redial)
Redialを用いたユニバーサルなフェッチ
サーバサイドとクライアントサイド両方で、以下のようにtriggerを実行する
サンプルプロダクトの紹介
https://github.com/scubism/todo_center
以上です
Recommended