問題タブ [redux]

最新のアプリで react-router と redux を使用していますが、現在の URL パラメータとクエリに基づいて必要な状態変更に関連するいくつかの問題に直面しています。

基本的に、URLが変更されるたびに状態を更新する必要があるコンポーネントがあります。状態は、デコレータを使用して redux によって小道具を介して渡されます。

現時点では、react-router が this.props.params と this.props.query で URL が変更されたときに新しい props をハンドラーに渡すため、react-router からの URL 変更に応答するために componentWillReceiveProps ライフサイクル メソッドを使用しています。このアプローチの主な問題は、このメソッドでアクションを起動して状態を更新していることです-その後、同じライフサイクルメソッドを再度トリガーするコンポーネントに新しい小道具を渡します-したがって、基本的に無限ループを作成します。現在、私は状態変数を使用して、これが起こらないようにします。

ルート遷移に基づいてアクションをトリガーする標準的なアプローチはありますか、またはストアの状態を小道具を介して渡すのではなく、コンポーネントの状態に直接接続できますか? willTransitionTo 静的メソッドを使用しようとしましたが、そこにある this.props.dispatch にアクセスできません。

サーバー側のレンダリングが SEO、特に一部のブログ アプリに適していることはわかっています。ただし、クライアント側のレンダリング アプリと比較すると、いくつかの優れた ux 機能が失われ、デバッグが容易ではありません。

サーバー側のレンダリング手法を Web アプリの一部 (アプリのブログ部分など) に適用し、残りはクライアント側のレンダリングを使用する方法があるかどうか疑問に思っています。サーバー側とクライアント側のレンダリングを混ぜ合わせます。これが同型アプリの意味するものかどうかはわかりません。

アクションを定期的にディスパッチする方法/場所は? 再帰setTimeoutを使用してカウントダウンを作成します。

例から取得すると、次のようになります。

これは良い考えですか、それともミドルウェアを使用するか、別の場所からアクションを作成するなど、この問題に対するより良いアプローチがありますか?

私はストアを介してタイマーの開始/停止を制御できる、これの汎用バージョンを好みます。

サンプル実装をセットアップしましたhttps://gist.github.com/eguneys/7023a114558b92fdd25eをご覧ください

私はEmber Object Modelで計算されたプロパティに慣れています。これは、他のプロパティに依存する計算されたプロパティを指定する便利な方法です。

fullNameとに依存するfirstNameと言ってlastName、計算されたプロパティを関数としてセットアップし、変更を加えるたびにcomputeProperties呼び出すことができます。computeProperties

例：

毎回余分な関数を呼び出す必要がないように、計算されたプロパティを自動的にセットアップする方法はありますか? Redux または ImmutableJS で。

私はfluxを使い始めたばかりで（今のところreduxを使用）、関係をどのように処理する必要があるのか​​ 疑問に思っています。
例として、カードを含む列を持つボードを持つ Trello を使用できます。

1 つのアプローチは、ボード用に 1 つのストア/リデューサーを用意し、そこにすべてのデータを格納することですが、これは列とカードのすべてのアクションも含める必要があるため、非常に太いストアを意味します。

私が見た別のアプローチは、ネストされたリソースをたとえばBoardStore、ColumnStore、CardStoreに分離し、それらのIDを参照として使用することです。

少し混乱している例を次に示します。すべてのデータを含むカードを作成するようにサーバーに要求する addCard というアクション クリエーターを使用できます。楽観的な更新を行っている場合は、以前にストアの 1 つでカード オブジェクトを作成したことになりますが、リクエストが返されるまでその ID を知ることはできません。

要するに：

• addCardの発火
• addCard はリクエストを行いますが、その間にタイプ ADD_CARD_TEMP のアクションを返します
• リクエストを取得し、ストア/リデューサーが ID を変更するタイプ ADD_CARD のアクションを返します。

この場合に対処するための推奨される方法はありますか? ネストされたストア/レデューサーは私には少しばかげているように見えますが、それ以外の場合は非常に複雑なストアになってしまうため、実際には妥協のように見えます.

次のようなアプリ状態オブジェクトがあります。

サーバーから (API を使用して) フェッチするときは、false に設定し、マージして応答から取得しfetchたいと考えています。これまでのところ、 を使用するのは簡単です。ノードにエレガントにマージする方法がよくわかりません。それらはであり、プロパティに基づいてマージする必要があります。このビットのコードにそれを組み込むエレガントな方法はありますか?$isLoadingcurrentPagetotalPagesmergeresultsImmutable.Map_id

私はreact-routerを使用しており、URLでIDを取得するコンポーネントに移動し、このIDを使用してアクションを使用してサーバーからデータを取得する必要があります。

現時点では、componentWillMountフックでアクション クリエーターを呼び出しています。

これは今のところ機能しますが、問題が発生します。render メソッドでは、myData実際にレンダリングする前に、そのすべての属性が実際に存在するかどうかを確認する必要があります。

手動チェックなしでレンダリングする前にストアにデータを取得する別の方法はありますか?

私は過去数か月にわたって React と Flux を学んできましたが、まだ対処していないことの 1 つは、ユーザーにエラー メッセージを表示することです。具体的には、フラックス アクション クリエーター メソッド内での ajax http リクエストの結果として発生するエラー メッセージです。

簡単な例はユーザーのサインインです。パスワードが間違っているためにサインイン ajax 要求が失敗した場合、サーバーは失敗で応答します。その時点で、flux アクション作成メソッド内で、エラー情報を含むアクションをディスパッチするしかありませんよね?

エラー情報を発送し、そのエラーをストアに保管できます。ただし、特定のエラーを特定のコンポーネントに結び付ける最善の方法が何であるかはわかりません。私の反応コンポーネントツリーが複数のエラー認識コンポーネントをレンダリングしているとしましょうが、サーバー側のユーザー認証の試行中にエラーが発生し、そのサインインフォームに表示する必要があります.

エラーを保存し、それらがどのコンポーネント用であるかを知るための適切なパターンまたは規則はありますか? アクションクリエーターが呼び出されるコンポーネントを識別するすべてのアクションクリエーター関数に識別子を渡す代わりに、これを決定するプログラム的な方法はありますか?