react-router/react-router-reduxを使用して特定のreduxアクションを1つのルートにバインドします。

Question

私は現在、redux、react-router（pushState Historyを使用）とreact-router-reduxを使用して反応するアプリケーションを開発中です。私は現在やっていることは、私はすべてのドキュメントのようなベストプラクティスを見たように私は、特定のコンポーネントに私のルートを結合していますということです。そして、

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

私が持っているようなリンクコンポーネントである私のフィードコンポーネント、のどこかに以下の

<Link to={{ pathname: '/f/' + item.id + '-' + urlSlug(item.title) }}>{item.title}</Link> 

リンクは/ f/123のようになります。コンポーネント123にナビゲートしているリンクをクリックすると、コンポーネントFeedItemがロードされます。これまでのところすべて正常に動作しています。私はまた、mapstatetopropsに接続された私のフィードアイテムのための特定の還元剤を持っています。私はこれがすべて正しく行われたと思います。

しかし、私の問題や質問は現在以下の通りです：

私は「SHOW_FEED_ITEM」のように呼ばれる作用を有します。このアクションは、ユーザーがurl/f/123に直接ナビゲートしている場合に使用する必要がありますが、理想的にはLinkコンポーネントをクリックしても理想的です。

ルータが実際に行っていることは、@@ router/LOCATION_CHANGEアクションを実行していることです。私の減速機の中から、私はこのアクションを処理して自分自身のアクションをディスパッチすることができますが、私はそれらのルートすべてに対して適切なアクションにリダイレクトするためにそこから2回目にルーティングURLを解析しなければならないので、

私が今やっていることは、mapStateToProps関数のprops.id（Route f /：idから来ている）を受け取り、それを自分のコンポーネントに渡すことです。これは、私のコンポーネントが正しいIDを提示する方法です。

は今

が、また、それだけではなく、それがロードする必要がありますどのコンポーネント（複数可）を彼に伝えるの処理すべきアクションルータに指示するほうがよいのではないでしょう...私の実際の質問に来ますか？

私は自分のアクションをディスパッチするリンクにonClickハンドラを追加することができますが、これはリンクのクリック、ブラウザの前/後、またはユーザアクションの更新にのみ影響します。

これはすでに現在でも可能でしょうか？ あなたはどうやってそれを処理しますか？

Answer 1

同じ問題と疑問を抱えている人には：私はすでに反応ルータが提供しているソリューションを見つけました。

各ルートにはonEnter属性とonLeave属性があります。これは基本的に、ルートがレンダリングされる前にフックされたルートのコールバック関数です。その上

import React from 'react' 
import { Route } from 'react-router' 
import CoreLayout from './layout/corelayout' 
import Feed from './components/feed/feed' 
import FeedItem from './components/feed-item/feed-item' 

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

もっと

がここで見つけることができます：だからここonLeave

<Route path="route/:id" components={MyComponent} onLeave={()=>store.dispatch(myComponentsLeaveAction())} /> 

フォーカス取得時

<Route path="route/:id" components={{content: MyComponent}} onEnter={()=>store.dispatch(myComponentsEnterAction())} /> 

は、上記の例の完全なルータのコードです：

• https://github.com/reactjs/react-router/blob/master/docs/Glossary.md#route
• https://github.com/reactjs/react-router/blob/master/docs/Glossary.md#enterhook