0

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

export default function (store) {
  return <Route path='/' component={CoreLayout}>
    <Route path="feed" components={{content: Feed}} />
    <Route path="f/:id" components={{content: FeedItem}} />
  </Route>
}

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

<Link to={{ pathname: '/f/' + item.id + '-' + urlSlug(item.title) }}>{item.title}</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 ハンドラーを追加できることはわかっていますが、これはリンクのクリックにのみ影響し、ブラウザーの前後の操作やユーザー アクションの更新には影響しません。

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

4

1 に答える 1