Gebinde spezifische Redux-Aktion auf eine Route mit react-router/react-router-redux

Question

Ich entwickle gerade eine Anwendung in react mit redux, react-router (mit pushState History) und react-router-redux. Was ich zur Zeit mache ist, dass ich auf bestimmte Komponenten meine Routen bin Bindung, wie ich in jeder Dokumentation als Best Practice sah:

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

Dann habe ich einen Link Komponente wie folgt aus irgendwo in meinem Feed-Komponente, die ist verantwortlich für die Anzeige eines bestimmten Eintrags:

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

Die Verknüpfung kann dann etwas wie/f/123 sein. So wird die Komponente FeedItem geladen, wenn ich auf den Link klicke, der zu Punkt 123 navigiert. Bis jetzt funktioniert alles gut. Ich habe auch einen spezifischen Reducer für meine Feeditem, verbundene MapStateTrops. Ich denke, das ist alles richtig gemacht.

Aber mein Problem oder eine Frage ist nun folgende:

Ich habe eine Aktion wie „SHOW_FEED_ITEM“ genannt. Diese Aktion sollte verwendet werden, wenn der Benutzer direkt zur URL/f/123 navigiert, idealerweise aber auch, wenn man auf die Link-Komponente klickt.

Aber was der Router tatsächlich tut, ist eine @@ Router/LOCATION_CHANGE Aktion auslösen. Von meinem Reducer aus kann ich diese Aktion durchführen und meine eigene Aktion ausführen, würde diese Lösung aber nicht bevorzugen, da ich die Routing-URL ein zweites Mal von dort aus analysieren müsste, um in die richtige Aktion für all diese Routen umzuleiten.

Was ich gerade mache, ist die Props.id (kommt von der Route f /: id) in meiner mapStateToProps Funktion und übergebe sie an meine Komponente. So kommt meine Komponente mit der richtigen ID aus.

Nun zu meiner eigentlichen Frage kommen ..

Wäre es nicht besser, auch den Router zu sagen, welche Aktion es statt nur behandeln sollte ihm die Komponente (n) zu erzählen sollte es laden?

Ich weiß, dass ich einen onClick-Handler zum Link hinzufügen könnte, der meine Aktion löst, aber dies würde nur einen Klick auf den Link, keinen Browser vor/zurück oder sogar Benutzeraktionen aktualisieren.

Ist das vielleicht jetzt schon möglich? Wie gehst du damit um?

Answer 1

Für diejenigen, die über die gleichen Probleme und Fragen kommen: Ich habe eine Lösung gefunden, die react-router bereits bietet.

Für jede Route ist ein onEnter- und onLeave-Attribut verfügbar. Dies ist im Grunde eine Callback-Funktion für die Route, die vor dem Rendern der Route angehängt wird.

onEnter

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

OnLeave

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

Also hier ist ein kompletter Router-Code des obigen Beispiel:

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> 
} 

Mehr dazu finden Sie hier :

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