問題タブ [react-router-redux]

参考までに、私は React-Redux スターター キット ( https://github.com/davezuko/react-redux-starter-kit ) をベース プロジェクト レイアウトとして使用しています。

という名前のルートがあり、コンテナ コンポーネントにレデューサーを注入するためにand reduxをTSP使用しています。getComponentconnect()children

getChildRoutesTSP ルート定義の が呼び出されることはありません。

ルート ルーター構成:

ネストされたルーター構成 (TSP):

私はdebugger内にたどり着くことはありませんgetChildRoutes。

ヘルプをいただければ幸いです。表示に必要なファイルが他にある場合は、それらを追加できます。

現在、redux、react-router (pushState 履歴あり)、および react-router-redux を使用して、react でアプリケーションを開発しています。私が現在行っていることは、すべてのドキュメントでベストプラクティスとして見たように、ルートを特定のコンポーネントにバインドしていることです:

次に、Feed コンポーネントのどこかに次のような Link コンポーネントがあり、特定のエントリを表示する責任があります。

リンクは /f/123 のようになります。そのため、アイテム 123 に移動するリンクをクリックすると、コンポーネント FeedItem が読み込まれます。これまでのところ、すべて正常に動作しています。また、feeditem 用の特定の reducer もあり、mapstatetoprops に接続されています。これはすべて正しく行われていると思います。

しかし、私の問題または質問は次のとおりです。

「SHOW_FEED_ITEM」のようなアクションがあります。このアクションは、ユーザーが URL /f/123 に直接移動する場合に使用する必要がありますが、リンク コンポーネントをクリックする場合にも使用するのが理想的です。

しかし、ルーターが実際に行っていることは、@@router/LOCATION_CHANGEアクションを起動することです。レデューサー内から、このアクションを処理して独自のアクションをディスパッチできますが、これらすべてのルートの適切なアクションにリダイレクトするために、そこからルーティング URL をもう一度解析する必要があるため、このソリューションは好みません。

私が今やっているのは、mapStateToProps 関数で props.id (Route f/:id から取得) を受け取り、それをコンポーネントに渡すことです。これが、コンポーネントが正しい ID を取得する方法です。

今、私の実際の質問に来ます..

どのコンポーネントをロードする必要があるかをルーターに伝えるだけでなく、どのアクションを処理する必要があるかをルーターに伝えた方がよいのではないでしょうか?

アクションをディスパッチするリンクに onClick ハンドラーを追加できることはわかっていますが、これはリンクのクリックにのみ影響し、ブラウザーの前後の操作やユーザー アクションの更新には影響しません。

これはおそらくすでに可能ですか？どうやってそれを処理しますか？

React + React-Router と React-redux で Web サイトを作成しています。これは私のストアとリデューサーです:

まだアクションがありません。後で追加します。話は戻りますが、これは React App のエントリーポイントである App Component です。

この App コンポーネントは、Redux-Router の connect メソッドで接続します。

最後に、Provider 内の ConnectedApp の代わりに Router コンポーネントを提供し、ConnectedApp をインデックス コンポーネントとして使用します。

さて、これが問題です。Redux Store の状態をサブコンポーネント (PostsMain または PostsWrite) に Props として送信したいのですが、渡す方法がわかりません。レンダリングされる可能性のあるすべてのサブコンポーネントは React Router によって決定され、各コンポーネントには Redux によって保存された状態はありません。

React-Router-Redux、Redux-Router などのモジュールを見ましたが、それらを使用せずに実行したいと考えています。誰かがそれを行う方法を知っている場合は、アドバイスをください。それは非常にありがたいです。

この問題をデバッグするための提案を探しています。

通常、reactjs アプリが起動すると、状態が次のように初期化されます

このCollectionDataクラスは、基本的にimmutable-jsマップ型の多くのプロパティで構成されるクラスです。

ただし、理由により、特定のルートの場合、状態はこれに初期化されます

CollectionDataのプロパティがどのように変更される可能性があるのか​​ わかりませんSymbol(react.element)

最適なデバッグ方法を教えてinitRoutesください。

私はこれらの依存関係を使用しています:

編集：

プロパティstoreとを展開するとtype: function Row(_ref2)、次の属性が表示されました。

1) ストア:validated: false

2) 行:arguments: TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context. at Function.remoteFunction (<anonymous>:3:14) at Object.InjectedScript.callFunctionOn (<anonymous>:124:124)

ストアは基本的にめちゃくちゃで、Redux Devtool (Chrome 拡張機能) で検査できません。このエラーに関連していると思います

React/Redux/React-Router/React-Router-Redux アプリケーションのアドレスバーでルートを「表面的に」更新する方法を探しています。ルートが変更されたときにコンポーネントを実際に再マウントする必要はありません。

React CSS Transition Groups を使用して、ルートに入るアニメーションを作成しています。したがって、ユーザーが

/home/

に

/home/profile/bob、

アニメーションが発生します。

ただし、一度オン/home/profile/bobにすると、ユーザーは左右にスワイプして他のプロファイルにアクセスできます/home/profile/joe。

これが発生したときにアドレスバーのURLを更新したいのですが、現在、profileコンポーネントが再マウントされ、CSSトランジショングループが再トリガーされ、アニメーションがトリガーされます.プロファイル ルート間の切り替え時ではなく、非プロファイル ルートからプロファイル ルートへ。

これが理にかなっていることを願っています。基本的に、そのルートを管理するコンポーネントの再マウントを強制することなく、アプリの URL を「表面的に」更新する方法を探しています。

そのため、ルートのロード時に Sagas を動的に注入しています

injectAsyncSagas次のようになります。

は、ストアの作成時に作成されますstore.runSaga。sagaMiddleware.run

ルートが読み込まれると、サガが正常に開始されます。アクションをリッスンしています。

ルートをロードすると、「Start mySagaFunction」がコンソールされます。SOME_HOME_PAGE_ACTION をディスパッチすると、必要なことはすべて正常に実行されます。ページを離れると、ルーターが LOCATION_CHANGE を呼び出し、Saga コンソールが「mySagaFunction を停止」して、while ループを正常に終了したことを意味します。

それから別のルートに行き、このルートに戻ってきます。今回は、予想どおり、LOCATION_CHANGE がルーターによってディスパッチされました。しかし佐賀は始まってすぐに止まる。私のコンソールは次のようになります：

Redux 開発ツールでは、LOCATION_CHANGE が 1 つしか表示されません。Saga が開始され、すぐに停止する理由を特定するにはどうすればよいですか? ルートに戻った場合にのみ発生します。

LOCATION_CHANGEの発送が遅れているのではないかと思いました。しかし、いいえ。私のレデューサーでは、アクションタイプを慰めました。最初に LOCATION_CHANGE で Reducer が呼び出され、saga が開始され、次に saga が停止します。

ページ間を移動するために使用Linkしています。私も試しbrowserHistory.push(url)てみdispatch(push(url))ました。同じ結果です。

注: react-boilerplateからサガを挿入するためのコードを取得しました。私はこのコードのみを使用しており、ボイラープレート自体は使用していません。定型文を実行しましたが、このバグは発生していません。違いは次のとおりです。

• selectLocationStatesyncHistoryWithStore で使用しています。私の店全体は不変ではないので、それは必要ありません。
• fromのrouteReducer代わりに独自のものを使用しています。理由はわかりません。完全に不変のストアが原因かもしれません。routerReducerreact-router-redux

とにかく、定型コードで上記の2つのポイントを削除しましたが、まだシナリオは発生していません。