Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactjsとRxJS
Search
Taketoshi Aono(青野健利 a.k.a brn)
June 07, 2017
Programming
0
250
ReactjsとRxJS
ReactjsとRxJSを組み合わせた実装について
react-mviについて
Taketoshi Aono(青野健利 a.k.a brn)
June 07, 2017
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
3k
Parsing Javascript
brn
13
9.1k
JSON & Object Tips
brn
1
440
CA 1Day Youth Bootcamp for Frontend LT
brn
0
870
Modern TypeScript
brn
2
770
javascript - behind the scene
brn
3
710
tc39 proposals
brn
0
830
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
650
Other Decks in Programming
See All in Programming
GAEログのコスト削減
mot_techtalk
0
120
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
170
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
840
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
5
1.9k
Formの複雑さに立ち向かう
bmthd
1
890
sappoRo.R #12 初心者セッション
kosugitti
0
260
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
830
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
120
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
Code Reviewing Like a Champion
maltzj
521
39k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Navigating Team Friction
lara
183
15k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Become a Pro
speakerdeck
PRO
26
5.1k
The Pragmatic Product Professional
lauravandoore
32
6.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Statistics for Hackers
jakevdp
797
220k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Transcript
ReactとRX
名前: @brn (青野健利) 職業: フロントエンドエンジニア・ネイティブエンジニア 会社: Cyberagent アドテクスタジオ RightSegment・AI Messenger
ブログ: http://brn-log.hatenablog.com/
アーキテクチャの問題 Reduxはよくできている。が、もっと検討してみよう。 うん?Cyclejs?なんだこれ?
アーキテクチャの問題
アーキテクチャの問題 よし、パクろう。 けどJSX使いたい。 よし、作ろう。
MVIアーキテクチャを取り入れる
MVIアーキテクチャを取り入れる
React + RX Cyclejsをパクって、Rxjsを取り入れたけど、 RxjsのSubscribeでレンダリングするのは嫌ー PropsにObservableを渡したらよしなにしてほしい… よし、作ろう…
react-mvi import { Tags as T } from '@react-mvi/core'; class
Component extends React.Component { render() { <T.Div> <h1>{this.props.text.map(v => v + ' World')}</h1> </T.Div> } }
react-mvi 内部では、ObservableをsubscribeしてVirtualDOMを書き換えています。 変更が起きた所のみをミュータブルに変更するので、高速です。 shouldComponentUpdate必要ないです。 結果通常のReactでは不可能な部分更新に対応できました。
react-mvi なんかMVIのModelになんでも入ってて嫌だから分割しよう。 そんで、分割したクラスはもちろんDIしたい。 DIコンテナも作るか。
react-mvi import { createModule, Injector, inject } from '@react-mvi/core'; import
{ MyService } from './myservice'; class MyComponent { @inject() private myService; ... } const module = createModule(config => { config.bind('myService').to(MyService).asSingleton(); }); const injector = new Injector([module]); const myComponent = injector.inject(MyComponent);
react-mvi ちゃんとReactコンポーネントでも動きます!
react-mvi import React from 'react' import { createModule, Injector, inject,
run } from '@react-mvi/core'; import { MyService } from './myservice'; class MyComponent extends React.Component { @inject() private myService; ... } const module = createModule(config => { config.bind('myService').to(MyService).asSingleton(); }); const injector = new Injector([module]); run({component: MyComponent, injector}); // SAME AS ReactDOM.render
react-mvi h"ps://github.com/brn/react-mvi 私はスターが好きです。 I like github star.