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
260
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
14
9.2k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
940
Modern TypeScript
brn
2
800
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
870
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
690
Other Decks in Programming
See All in Programming
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
220
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
270
Deep Dive into ~/.claude/projects
hiragram
8
1.5k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
技術同人誌をMCP Serverにしてみた
74th
1
370
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Optimizing for Happiness
mojombo
379
70k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Gamification - CAS2011
davidbonilla
81
5.3k
Docker and Python
trallard
44
3.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Bash Introduction
62gerente
614
210k
Code Reviewing Like a Champion
maltzj
524
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
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.