Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

15,921 views

Published on

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

Published in: Technology
  • Be the first to comment

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

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

×