問題タブ [mobx]

Meteor と React および MobX (Mantra アーキテクチャを使用) を使用してテストするための新しいサンプル/ボイラープレート プロジェクトをセットアップしました。プロジェクトはhttps://github.com/markoshust/mantra-matui-mobxにあります

State.header.title プロパティの状態変更が、再レンダリング時に更新された状態変更を適切に反映していないという問題があります。

私の状態は、単純なオブジェクトをプルすることによって構築されます: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/stores/route.js

1 つのマスター オブザーバブル オブジェクトへ: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/main.js#L8

ルート変更をリストし、アクションを呼び出して状態を更新しています: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/reactions/route.js#L10

このアクションは状態を更新します: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/actions/route.js#L5

コンソールは適切な状態変更をログアウトしているため、状態は適切に更新されています。ただし、コンポーネントは更新された状態で再レンダリングされていません (この行は console.log'ing old state val です): https://github.com/markoshust/mantra-matui-mobx/blob/master/client/ modules/core/containers/Header.js#L6

「更新中...」というメッセージが表示されているため、コンポーネントは再レンダリングされていますが、まだ古い状態でプルされているようです。observerすべての反応コンポーネントに 追加しました: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/components/Header.js

私はさまざまな情報源から、mobx がレンダラーに反応し、redux よりも高速であることを読みました。しかし、いくつかのテストを行ったところ、mobx オブザーバブルへの新しいデータの追加がかなり遅いことがわかりました。反応ネイティブ環境では、ミリ秒ごとにカウントされ、200 要素をループして配列を埋めるのに 100 ミリ秒以上かかるソリューションを使用するのは難しいです私は本当に mobx を楽しんでいるので、誰かがテスト コードを見て、いくつかのヒントを与えてくれることを願っています - 私が間違っていることと、パフォーマンスを改善する方法。

私のラップトップでは、完了するまでに約120ミリ秒かかります。observable-s がなければ、1 ミリ秒もかかりません

デフォルト値を持つ監視可能なオブジェクトを使用してMobXストアをセットアップし、その値は反応ネイティブシーンのロード時にサーバーから取り込まれます。UserPreferencesStore次のような観察可能なユーザー設定のリストがあります。

RN 側では、これらの値は次のように変更されます。

変更されたアイテムのみをサーバーに送信する方法がわかりません。何か案が？また、フィールドが 20 個あるとしても、監視可能なオブジェクトであるこの状況で mobx を使用する最も効率的な方法はありますか?

コンポーネントの render メソッドで配列をマップしようとしていますが、配列である.map is not a functionにもかかわらず、引き続き表示されます。

コンソール ログには次の結果が表示されます。

[{"id":1,"名前":"ベルリン","国":"ドイツ","デフォルト":1,"スラッグ":"ベルリン"},{"id":2,"名前": "ハンブルグ","国":"ドイツ","デフォルト":0,"スラッグ":"ハンブルグ"}]

未定義の理由.mapがわかりません - ここで何か不足していますか?

次のコードを変換しようとしています。

これに：

私はデコレータについて調べようとしましたが、どうすればこれを達成できるかについて完全に混乱しています。

@computedを使用するデコレータを持つ mobX と一緒に使用していますextendObservable。ただし、それは TypeScript で書かれており、ecmascript での動作とは完全には一致しません。extendRxObservableの上に実装されていextendObservableます。

userDataこれらのデフォルトのAuthStoreがあります：

オブジェクトは、ログイン時にそれぞれのフィールドに取り込まれ、次のようになります。

電子メール フィールドは特殊です。認証されたユーザーが自分のプロファイルを表示したときに、そのプロファイルにある場合にのみ取得/存在する必要があります。別のユーザーのプロファイルにアクセスすると、メール以外のすべてのフィールドが存在する必要があり、メールなしで API から取得されます。

これらは 2 つの異なるタイプのユーザーであるため、電子メールが存在する認証ユーザーであり、他のユーザーにアクセスすると、電子メールはなく、他のすべてのそれぞれのフィールドがあります。このマルチ userData ユースケースを処理する最善の方法は何ですか?

1. 電子メールを除いて、同じ繰り返しフィールドを持つ 2 つのストアが存在する必要がありますか? 上記の AuthStore で電子メールをそのまま使用し、次に電子メールなしで同じフィールドを持つ別の UserStore を作成し、2 つの異なる反応ネイティブ ownerProfile.js (認証ユーザー用) と profile.js (他のユーザー用) を作成しますか? これは気分が悪い...

2. 現在、AuthStore.userData.username を使用しているため、アプリの更新時にプロファイルの userData フィールドが空になり、プロファイルにアクセスするとエラーが発生するため、ログインした userData オブジェクトを保存して、アプリケーションの更新時に取得する最善の方法は何ですか? toUpperCase(); nullで.toUpperCase()を実行しようとしているため、エラーが発生します。

水和物/toJsonに出くわしましたが、全体に混乱しており、それらをいつ/どのように実装するか、またはそれらが私の問題の解決策であるかどうかさえわかりません。私は自分のプロジェクトで立ち往生しており、この問題のために先に進むことができません。

MobXを使用してこれを解決する方法はありますか?

I am beginning to connect my store to mobx. I wonder the difference between the use of observer(['store'],...) or the use of inject('store')(observer(...))

The main difference I see it that inject is not reactive. So what the intents of inject over observer exactly?

コンポーネント内のいくつかの参照にアクセスしようとしています。しかし、コンソールにこのエラーがあります。 withRouter.js:44 Warning: Stateless function components cannot be given refs (See ref "pseudo" in FormInputText created by RegisterForm). Attempts to access this ref will fail.

ここに私のコンポーネントがあります:

さらに、ボタンをクリックするとObject {pseudo: null}、コンソールに表示されます。代わりにオブジェクトが必要nullです。

なぜこれが機能しないのか理解できません。私の反応ツリーは を使用していることに注意してくださいmobx-react。