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
1から理解するWeb Push
dora1998
7
1.9k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
160
Design Foundational Data Engineering Observability
sucitw
3
200
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
320
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
530
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
440
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
460
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
Improving my own Ruby thereafter
sisshiki1969
1
160
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
540
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
A better future with KSS
kneath
239
17k
Unsuck your backbone
ammeep
671
58k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Agile that works and the tools we love
rasmusluckow
330
21k
Building Applications with DynamoDB
mza
96
6.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Invisible Side of Design
smashingmag
301
51k
How to Ace a Technical Interview
jacobian
279
23k
It's Worth the Effort
3n
187
28k
Optimizing for Happiness
mojombo
379
70k
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.