ARCANA Meetup LT React x RX

1. ReactとRX

2. 名前: @brn (青野健利)
職業: フロントエンドエンジニア・ネイティブエンジニア
会社: Cyberagent アドテクスタジオ RightSegment・AI Messenger
ブログ: http://brn-log.hatenablog.com/

3. アーキテクチャの問題
Reduxはよくできている。が、もっと検討してみよう。
うん？Cyclejs？なんだこれ？

4. アーキテクチャの問題

5. アーキテクチャの問題
よし、パクろう。
けどJSX使いたい。
よし、作ろう。

6. MVIアーキテクチャを取り入れる

7. MVIアーキテクチャを取り入れる

8. React + RX
Cyclejsをパクって、Rxjsを取り入れたけど、
RxjsのSubscribeでレンダリングするのは嫌ー
PropsにObservableを渡したらよしなにしてほしい…
よし、作ろう…

9. 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>
}
}

10. react-mvi
内部では、ObservableをsubscribeしてVirtualDOMを書き換えています。
変更が起きた所のみをミュータブルに変更するので、高速です。
shouldComponentUpdate必要ないです。
結果通常のReactでは不可能な部分更新に対応できました。

11. react-mvi
なんかMVIのModelになんでも入ってて嫌だから分割しよう。
そんで、分割したクラスはもちろんDIしたい。
DIコンテナも作るか。

12. 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);

13. react-mvi
ちゃんとReactコンポーネントでも動きます！

14. 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

15. react-mvi
https://github.com/brn/react-mvi
私はスターが好きです。
Ilikegithubstar.