Submit Search
Upload
React Redux Redux-Saga + サーバサイドレンダリング
•
11 likes
•
17,005 views
エンジニア勉強会 エスキュービズム
Follow
React/Redux/Redux-Saga+サーバサイドレンダリング
Read less
Read more
Technology
Report
Share
Report
Share
1 of 42
Download now
Download to read offline
Recommended
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
React + FLUX + Redux + Redux Saga のお話
React + FLUX + Redux + Redux Saga のお話
Shinichiro Yoshida
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Yutaro Miyazaki
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Azure container service上でコンテナベースでオートスケールの検証をしてみた
エンジニア勉強会 エスキュービズム
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
Recommended
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
React + FLUX + Redux + Redux Saga のお話
React + FLUX + Redux + Redux Saga のお話
Shinichiro Yoshida
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Yutaro Miyazaki
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Azure container service上でコンテナベースでオートスケールの検証をしてみた
エンジニア勉強会 エスキュービズム
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
kidach1
さわってみようReact.js、AngularJS(1系、2系)
さわってみようReact.js、AngularJS(1系、2系)
Kazuhiro Yoshimoto
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
React.js・ReactNative・Redux入門
React.js・ReactNative・Redux入門
Kazuhiro Yoshimoto
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
Kazuhiro Yoshimoto
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
Kazuhiro Yoshimoto
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
React Native 入門
React Native 入門
Seiichi Okumiya
Re-frame and A-Frame
Re-frame and A-Frame
Kazuhiro Hara
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
Takehiro Takahashi
小売りにおけるAIの可能性
小売りにおけるAIの可能性
エンジニア勉強会 エスキュービズム
エスキュービズム新技術発表資料
エスキュービズム新技術発表資料
エンジニア勉強会 エスキュービズム
More Related Content
What's hot
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
kidach1
さわってみようReact.js、AngularJS(1系、2系)
さわってみようReact.js、AngularJS(1系、2系)
Kazuhiro Yoshimoto
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
React.js・ReactNative・Redux入門
React.js・ReactNative・Redux入門
Kazuhiro Yoshimoto
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
Kazuhiro Yoshimoto
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
Kazuhiro Yoshimoto
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
React Native 入門
React Native 入門
Seiichi Okumiya
Re-frame and A-Frame
Re-frame and A-Frame
Kazuhiro Hara
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
Takehiro Takahashi
What's hot
(20)
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
One Time Binding & Digest Loop
One Time Binding & Digest Loop
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
さわってみようReact.js、AngularJS(1系、2系)
さわってみようReact.js、AngularJS(1系、2系)
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
React.js・ReactNative・Redux入門
React.js・ReactNative・Redux入門
20160927 reactmeetup
20160927 reactmeetup
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
Flux react現状確認会
Flux react現状確認会
React Native 入門
React Native 入門
Re-frame and A-Frame
Re-frame and A-Frame
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
Viewers also liked
小売りにおけるAIの可能性
小売りにおけるAIの可能性
エンジニア勉強会 エスキュービズム
エスキュービズム新技術発表資料
エスキュービズム新技術発表資料
エンジニア勉強会 エスキュービズム
「ソフトウェア品質データ分析を通じた組織的改善の促進」ソフトウエアジャパン2014「ITフォーラムセッション」IPA/SEC データの分析に基づくシステム...
「ソフトウェア品質データ分析を通じた組織的改善の促進」ソフトウエアジャパン2014「ITフォーラムセッション」IPA/SEC データの分析に基づくシステム...
Makoto Nonaka
「事実にもとづく管理」によるソフトウェア品質の改善 ー ヒンシツ大学 Evening Talk #04
「事実にもとづく管理」によるソフトウェア品質の改善 ー ヒンシツ大学 Evening Talk #04
Makoto Nonaka
はじめての品質
はじめての品質
エンジニア勉強会 エスキュービズム
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
「MakeLeaps」請求書の作成、管理、郵送
Viewers also liked
(7)
小売りにおけるAIの可能性
小売りにおけるAIの可能性
エスキュービズム新技術発表資料
エスキュービズム新技術発表資料
「ソフトウェア品質データ分析を通じた組織的改善の促進」ソフトウエアジャパン2014「ITフォーラムセッション」IPA/SEC データの分析に基づくシステム...
「ソフトウェア品質データ分析を通じた組織的改善の促進」ソフトウエアジャパン2014「ITフォーラムセッション」IPA/SEC データの分析に基づくシステム...
「事実にもとづく管理」によるソフトウェア品質の改善 ー ヒンシツ大学 Evening Talk #04
「事実にもとづく管理」によるソフトウェア品質の改善 ー ヒンシツ大学 Evening Talk #04
はじめての品質
はじめての品質
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
Similar to React Redux Redux-Saga + サーバサイドレンダリング
React + Reduxで作る対話AI
React + Reduxで作る対話AI
Kentaro Tada
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
taskie
SocketStream入門
SocketStream入門
Kohei Kadowaki
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Redux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElm
chuck h
Groovyコンファレンス
Groovyコンファレンス
Shinichiro Takezaki
普通のRailsアプリをdockerで本番運用する知見
普通のRailsアプリをdockerで本番運用する知見
zaru sakuraba
React.jsでサービスを作ってみた話
React.jsでサービスを作ってみた話
GIG inc.
javascript を Xcode でテスト
javascript を Xcode でテスト
Yoichiro Sakurai
Node.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript Framework
kamiyam .
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
Yahoo!デベロッパーネットワーク
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
Intoroduction to React.js
Intoroduction to React.js
Yuto Matsukubo
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
Create android app can send SMS and Email by React Natice
Create android app can send SMS and Email by React Natice
GMO-Z.com Vietnam Lab Center
react_rails
react_rails
Shigeru Kondoh
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
REACT & WEB API
REACT & WEB API
Shigeru Kondoh
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Kondo Hitoshi
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
Similar to React Redux Redux-Saga + サーバサイドレンダリング
(20)
React + Reduxで作る対話AI
React + Reduxで作る対話AI
JavaScript Tips 2015(PDF 版)
JavaScript Tips 2015(PDF 版)
SocketStream入門
SocketStream入門
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
Redux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElm
Groovyコンファレンス
Groovyコンファレンス
普通のRailsアプリをdockerで本番運用する知見
普通のRailsアプリをdockerで本番運用する知見
React.jsでサービスを作ってみた話
React.jsでサービスを作ってみた話
javascript を Xcode でテスト
javascript を Xcode でテスト
Node.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript Framework
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Intoroduction to React.js
Intoroduction to React.js
Mvc conf session_5_isami
Mvc conf session_5_isami
Create android app can send SMS and Email by React Natice
Create android app can send SMS and Email by React Natice
react_rails
react_rails
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
REACT & WEB API
REACT & WEB API
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Web制作勉強会 #2
Web制作勉強会 #2
More from エンジニア勉強会 エスキュービズム
Go言語によるWebアプリケーション開発
Go言語によるWebアプリケーション開発
エンジニア勉強会 エスキュービズム
機械学習ライブラリ : TensorFlow
機械学習ライブラリ : TensorFlow
エンジニア勉強会 エスキュービズム
Developer Summit 2016 参加してきました。
Developer Summit 2016 参加してきました。
エンジニア勉強会 エスキュービズム
ほんのりTDD
ほんのりTDD
エンジニア勉強会 エスキュービズム
IoTで何をやったか
IoTで何をやったか
エンジニア勉強会 エスキュービズム
2016 新人研修 基本技術講座 (1)
2016 新人研修 基本技術講座 (1)
エンジニア勉強会 エスキュービズム
Dockerを用いたマイクロサービスについて
Dockerを用いたマイクロサービスについて
エンジニア勉強会 エスキュービズム
VRのコンテンツ
VRのコンテンツ
エンジニア勉強会 エスキュービズム
Azureで動いている機械学習のいろいろについて
Azureで動いている機械学習のいろいろについて
エンジニア勉強会 エスキュービズム
レイアウトについて
レイアウトについて
エンジニア勉強会 エスキュービズム
アルゴリズムとデータ構造(初歩)
アルゴリズムとデータ構造(初歩)
エンジニア勉強会 エスキュービズム
何故エンジニアはテストをしないのか
何故エンジニアはテストをしないのか
エンジニア勉強会 エスキュービズム
IoTのIを考えてみる話
IoTのIを考えてみる話
エンジニア勉強会 エスキュービズム
AzureのIaaSとかの話
AzureのIaaSとかの話
エンジニア勉強会 エスキュービズム
【エンジニア勉強会】品質ってなんなのさ
【エンジニア勉強会】品質ってなんなのさ
エンジニア勉強会 エスキュービズム
【エンジニア勉強会】PMやってみた
【エンジニア勉強会】PMやってみた
エンジニア勉強会 エスキュービズム
Dockerを社内で使うために
Dockerを社内で使うために
エンジニア勉強会 エスキュービズム
Riot.jsに触れてみた話
Riot.jsに触れてみた話
エンジニア勉強会 エスキュービズム
Go言語オーバービュー201507
Go言語オーバービュー201507
エンジニア勉強会 エスキュービズム
Winストアアプリでble接続
Winストアアプリでble接続
エンジニア勉強会 エスキュービズム
More from エンジニア勉強会 エスキュービズム
(20)
Go言語によるWebアプリケーション開発
Go言語によるWebアプリケーション開発
機械学習ライブラリ : TensorFlow
機械学習ライブラリ : TensorFlow
Developer Summit 2016 参加してきました。
Developer Summit 2016 参加してきました。
ほんのりTDD
ほんのりTDD
IoTで何をやったか
IoTで何をやったか
2016 新人研修 基本技術講座 (1)
2016 新人研修 基本技術講座 (1)
Dockerを用いたマイクロサービスについて
Dockerを用いたマイクロサービスについて
VRのコンテンツ
VRのコンテンツ
Azureで動いている機械学習のいろいろについて
Azureで動いている機械学習のいろいろについて
レイアウトについて
レイアウトについて
アルゴリズムとデータ構造(初歩)
アルゴリズムとデータ構造(初歩)
何故エンジニアはテストをしないのか
何故エンジニアはテストをしないのか
IoTのIを考えてみる話
IoTのIを考えてみる話
AzureのIaaSとかの話
AzureのIaaSとかの話
【エンジニア勉強会】品質ってなんなのさ
【エンジニア勉強会】品質ってなんなのさ
【エンジニア勉強会】PMやってみた
【エンジニア勉強会】PMやってみた
Dockerを社内で使うために
Dockerを社内で使うために
Riot.jsに触れてみた話
Riot.jsに触れてみた話
Go言語オーバービュー201507
Go言語オーバービュー201507
Winストアアプリでble接続
Winストアアプリでble接続
Recently uploaded
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
Recently uploaded
(12)
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
React Redux Redux-Saga + サーバサイドレンダリング
1.
0 React/Redux/Redux-Saga +サーバーサイドレンダリング エスキュービズム・テクノロジー Jun 17,2016 S-cubism Technology
Inc.
2.
私のJavaScript遍歴(フレームワーク) 1 Prototype.js jQuery素 Backbone.js
Knockout.js 1年のブランク React Redux Redux-Saga 時代は変わっていた!
3.
私のJavaScript遍歴(文法) CoffeeScript ES5素 ES6
ES7
4.
https://facebook.github.io/react/
5.
古き良きWEBシステム URL HTML サーバー ブラウザ HTMLから”DOMツリー”を構築 (DOM:Document Object
Model)
6.
ブラウザでの動的な処理 #1 #2 #3 #4 #5 jQuery(“#2”).after(jQuery(“#5”)) 複数の操作が同時に発生したら? ↓ DOMの状態管理が難しかった DOM
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.
仮想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.
Reactの文法(ES6版)
10.
コンポーネントからDOMを構築 http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660 ReactDOM.render 仮想DOMを経由
11.
データフロー http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660 props props props props
12.
コンポーネントのライフサイクル props state 親コンポーネントから 与えられるデータ 内部で持つ状態 Mounted Update Unmounted setState() setProp() props, stateの変更を検知して描画 render()
13.
Reactのコンパイル http://www.pro-react.com/materials/appendixA/ 汎用ビルドツール JS用コンパイラ
14.
https://github.com/reactjs/redux
15.
コンポーネント間で直接やり取り? https://css-tricks.com/learning-react-redux/
16.
MVC? https://www.codementor.io/reactjs/tutorial/intro-to-react-redux-pros モデルの変更がどのビューに影響を与えるか予測が難しい
17.
https://css-tricks.com/learning-react-redux/ Reduxのデータフロー
18.
Reduxの全体像 http://chentsulin.github.io/redux-intro/
19.
タイマーの実装例 http://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas/
20.
アクションの定義 actions.js http://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas/
21.
Reducerの実装 reducers.js stateは直接編集せず コピーして編集する
22.
状態遷移図で表すと・・ http://jaysoo.ca/2016/01/03/managing-processes-in-redux- using-sagas/
23.
Reactコンポーネントの実装
24.
Dispatch timer.js タイマー スタート 描画 Subscribe
25.
ミドルウェア loggerミドルウェアを使えば、 以下のようなログを出力できる http://chentsulin.github.io/redux-intro/
26.
Redux-Saga
27.
非同期のアクション http://andrewhfarmer.com/react-ajax-best-practices/ Tick
28.
タイマーコンポーネント 状態遷移が伝わるまでに遅延がある timer.js ビューの中に非同期処理が入り混じる
29.
Redux-thunk ミドルウェア 一つのアクションの中で 非同期処理を記述 タイマーはアクションの 直後にスタート actions.js 非同期処理の起点となる アクションが肥大化する
30.
Redux-Sagaミドルウェア
31.
STARTアクションが 発生するまで 処理は止まる Generator 1秒待って、状態を参照 sagas.js
32.
責務の分離 Reducerの責務 → アクションに対する状態遷移 Sagaの責務
→ 複雑非同期な処理の指揮
33.
もう少し複雑な例 http://yelouafi.github.io/redux-saga/docs/advanced/NonBlockingCalls.html
34.
authorizeを参照 (forkはノンブロッキング) 認証リクエスト処理 の切り出し
35.
補足:async/awaitとの違い http://wecodetheweb.com/2016/01/23/handling-async-in-redux-with-sagas/ ES7でasync/awaitが提案されているが・・ ここのfetchは実行されてしまう redux-sagaではfetchの命令を待つことができる
36.
サーバーサイドレンダリング
37.
JSアプリのSEO問題 http://www.theseotailor.com.au/beginner-seo/introduction-to-seo/
38.
サーバーサイドの処理フロー リクエストを 受け取る Reduxストア の初期化 ユニバーサルな ルーティング Redux-Saga の起動 ユニバーサルな フェッチ Reactコンポーネント の文字列化 Reduxストア の文字列化 レスポンスを 返す (React-Router) (Redial)
39.
Redialを用いたユニバーサルなフェッチ
40.
サーバサイドとクライアントサイド両方で、 以下のようにtriggerを実行する
41.
サンプルプロダクトの紹介 https://github.com/scubism/todo_center
42.
以上です
Download now