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.3k
JSON & Object Tips
brn
1
510
CA 1Day Youth Bootcamp for Frontend LT
brn
0
970
Modern TypeScript
brn
2
820
javascript - behind the scene
brn
3
750
tc39 proposals
brn
0
890
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
710
Other Decks in Programming
See All in Programming
Design Foundational Data Engineering Observability
sucitw
3
200
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
概念モデル→論理モデルで気をつけていること
sunnyone
3
290
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
Ruby Parser progress report 2025
yui_knk
1
450
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
Improving my own Ruby thereafter
sisshiki1969
1
160
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.2k
1から理解するWeb Push
dora1998
7
1.9k
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
130
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Visualization
eitanlees
148
16k
Documentation Writing (for coders)
carmenintech
74
5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Agile that works and the tools we love
rasmusluckow
330
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
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.