react redux redux-saga + サーバサイドレンダリング

0

React/Redux/Redux-Saga+サーバーサイドレンダリング

エスキュービズム・テクノロジー

Jun 17,2016S-cubism Technology Inc.

私のJavaScript遍歴(フレームワーク)

1

Prototype.js jQuery素 Backbone.js Knockout.js

１年のブランク

React Redux Redux-Saga

時代は変わっていた！

私のJavaScript遍歴(文法)

CoffeeScript ES5素 ES6 ES7

https://facebook.github.io/react/

古き良きＷＥＢシステム

ＵＲＬ

ＨＴＭＬ

サーバー ブラウザ

ＨＴＭＬから”DOMツリー”を構築(DOM：Document Object Model)

ブラウザでの動的な処理

#１

#２

#３

#４

#５

jQuery(“#2”).after(jQuery(“#5”))

複数の操作が同時に発生したら？↓

DOMの状態管理が難しかった

DOM

手続き的から宣言的な処理へ

#１

#２

#３

#４

#１

#２

#５

#３

#４

state = [1, 2, 3, 4] state = [1, 2, 5, 3, 4] こうあるべきを定義

あとはよしなにＤＯＭを構築してくれる

DOM DOM

仮想DOMによる変更検知

#１

#２

#３

#４

#１

#２

#５

#３

#４

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/

汎用ビルドツール ＪＳ用コンパイラ

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/

Ｔｉｃｋ

タイマーコンポーネント

状態遷移が伝わるまでに遅延がある

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

以上です