web-dev-qa-db-ja.com

mobxで計算済み/オブザーバブルを使用する場合

Mobxのほとんどを手に入れているような気がしますが、何かを明確にしたいと思います。いくつかのオブザーバブルを含むストアがあり、そのコアはオブジェクトの配列（TypeScript）です。

class ClientStore {
    constructor() {
        this.loadClients();
    }

    @observable private _clients: IClient[] = [];
    @computed get clients() {
        return this._clients;
    }
    @observable isFetching: boolean = false;
    @observable sortField: 'title' | 'modified' = 'modified';
    @observable sortDescending: boolean = true;

    getClientByUrlName(urlName: string): IClient {
        return this._clients.find(c => c.urlName === urlName);
    }
etc...

私の質問は、その最後の関数であるgetClientByUrlNameです。これはobservableからの検出であるため、その関数を使用している@observerreactコンポーネントは正しく再レンダリングされます。この慣用的なmobxはそのようなものですか？それは計算された値でなければならないように感じます。それを使用したいコンポーネントの計算値を作成する必要がありますか？

//import singletone ClientStore
class ClientDetailsView extends React.Component<{params:{urlName:string}}, void> {

    @computed get client() {
        return ClientSotre.clients.find(c => c.urlName === this.props.params.urlName);
    }

...rest of react component

ここでベストプラクティスと落とし穴を探しています。どんな助けでも大歓迎です。

*修正されたコードサンプルエラーを編集する

reactjstypescriptmobx
11
Jakke

原則として @computedは、MobXに次のように指示する単純なディレクティブです。「この値could使用されるオブザーバブルのいずれかが変更されるまでキャッシュされます」。したがって、実際には、いつでも省略できます。つまり、アプリがより多く再計算することを意味しますが、結果は変わりません。

したがって、不足している場合は@computed原則としてほとんどの場合問題にならない機能について。そうである場合は、createTransformerを使用できます。これは、1つの引数の関数を取り、計算値の（セルフクリーニング）メモ化キャッシュを構築します。しかし、それはもう少し複雑なので、実際には、ClientDetailsViewに計算されたプロパティを導入するソリューションの方が優れています。計算されたプロパティ（この場合はそれを必要とするコンポーネント）を配置するのに適した場所がある限り、これを行うことをお勧めします。

15
mweststrate