react and-rx

React と RX

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

アーキテクチャの問題

Redux はよくできている。が、もっと検討してみよう。

うん？ Cyclejs ？なんだこれ？


よし、パクろう。けど JSX 使いたい。よし、作ろう。

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-mviimport 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

https://github.com/brn/react-mvi

私はスターが好きです。I like github star.

react and-rx

Engineering