React HooksとMobXをあわせて使う

main / app

`main`はエントリーポイントであり、`App`をマウントするだけ。

`app`もそのままの`App`コンポーネント。
`components`や`observers`にあるReactコンポーネントをレイアウト。

Functionalじゃないコンポーネントはコレだけで、ErrorBoundaryを兼ねるため。

contexts

`createContext()`でいわゆるストアをエクスポート。

stores

グローバルに存在する単一のストア。

ドメインごとにストアを分けるのがMobX流で、`ui`とか`media`とかいくつか別れてて、互いには依存しない。

effects

そんなストアを操作するための層。

`useEffect()`や`useCallback()`で利用されるものが全てココにあるし、ここ以外ではストアを更新しない。

なので型は`EffectCallback`かただの関数だけ。

observers

`mobx-react`の`Observer`コンポーネントによって、ストアに更新があった際にRe-renderされるコンポーネント。

`useContext()`でストアを取って、`effects`からハンドラを生成して下層にPropsとして配るだけの層。
スタイルに関する記述は一切なし。

根っこのコンポーネントでグローバルな`useEffect()`を呼ぶ。

components

型はすべて`FunctionComponent`で、必要ならHooksを使う。

今まではローカルな状態にもMobXを使ってたけど、`useState()`があるならそっちのほうがいいかなという感じ。
ここに関してはHooks最高！って思った。

WebRTC = StateFull

そもそもWebRTCとかやってると、シリアライズできない状態がいっぱいあって、そういうのとミュータブルな思想が相性いいってのもあるかも？

• 接続用の`RTCPeerConnection`
  • それをラップしてるであろうSDKのインスタンス
• 参加者の数だけ送られてくる`MediaStream(Track)`
• 自分が送信する`MediaStream(Track)`
• シグナリング用のチャンネル
• etc...

そういうわけで、結局はコンテキストなり状態管理の外側との濃厚なお付き合いが避けられないので、そのへん柔軟にやれるライブラリと相性が良いのだなあという感じ。

decorate w/ private accessor

そのクラスに`private`がついてるプロパティやメソッドがあるとエラーになる。

import { decorate, observable } from "mobx";

class Store {
  private _name: string;

  constructor() {
    this._name = "ok";
  }

  get name() {
    return this._name;
  }
}
decorate(Store, {
  // @ts-ignore: to use private accessor
  _name: observable
});

export default Store;

エラーこちら。

Argument of type '{ _name: IObservableFactory & IObservableFactories & { enhancer: IEnhancer<any>; }; }' is not assignable to parameter of type '{ prototype?: MethodDecorator | PropertyDecorator | MethodDecorator[] | PropertyDecorator[] | undefined; }'.
  Object literal may only specify known properties, and '_name' does not exist in type '{ prototype?: MethodDecorator | PropertyDecorator | MethodDecorator[] | PropertyDecorator[] | undefined; }'.

observable.shallow w/ decorate and constructor

`ObservableArray`の型がうまく当たらない。

import { decorate, observable } from "mobx";
import { IObservableArray } from "mobx";

class Store {
  items: IObservableArray<string>;

  constructor() {
    // @ts-ignore: to type IObservableArray
    this.items = [];
  }
}
decorate(Store, {
  items: observable.shallow
});

export default Store;

エラーこちら。

Type 'never[]' is missing the following properties from type 'IObservableArray<string>': spliceWithArray, observe, intercept, clear, and 4 more.

Observer does not accept null

import * as React from "react";
import { FunctionComponent } from "react";
import { Observer } from "mobx-react";

export const Chat: FunctionComponent<{}> = () => {
  return (
    <Observer>
      {() => {
        if (xxx) {
          // return null;
          return <></>;
        }

        return <div />;
      }}
    </Observer>
  );
};

エラーこちら。

Type '() => Element | null' is not assignable to type '() => ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.
  Type 'Element | null' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.
    Type 'null' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.

どれもワークアラウンドはあるし、実害はないので良いっちゃ良いけど、やっぱりちょっと嫌。