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
Rails アプリ地図考 Flush Cut
makicamel
1
130
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
1
310
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
140
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
130
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
890
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
2.9k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
楽しく向き合う例外対応
okutsu
0
570
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Six Lessons from altMBA
skipperchong
27
3.6k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cult of Friendly URLs
andyhume
78
6.2k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Docker and Python
trallard
44
3.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Rails Girls Zürich Keynote
gr2m
94
13k
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.