React Router + Redux - Versenden einer asynchronen Aktion bei einer Routenänderung?

Question

Ich habe eine universelle Reag-App, die redux und react-Router verwendet.

Ich habe mehrere Routen wie folgt:

/2016 
/2015 
/2014 
/2013 

usw.

Jede Route erfordert Daten von einer API. Zur Zeit habe ich die Elemente <Link> in der Navigationskomponente eine asynchrone Aktion onClick, die den Speicher mit Daten aus der API für diese Route befüllt.

Für MVP, überschreibe ich gerade die post: {} Inhalte in den Laden mit den neuen Post-Inhalten, wenn die Route ändert, auf diese Weise erhalten wir neue Inhalte, die auf der API war.

Ich habe festgestellt, dass die Action-Dispatcher auf den <Link>-Schaltflächen nicht optimal ist, da das Drücken der Zurück-Schaltfläche den Action-Dispatch nicht erneut auslöst, um den Inhalt für die vorherige Route zu erhalten.

Gibt es eine Möglichkeit, React Router dazu zu bringen, die Dispatch-Aktion bei jeder Änderung einer Route auszulösen? (Eine Beschränkung auf bestimmte Routen wäre ein Bonus).

Ich weiß, ich sollte die Geschichte aus dem Laden bekommen, aber jetzt ist es einfacher, die API wieder zu treffen durch das Auslösen einer Aktion Versand um den neuen Inhalt zu erhalten.

Prost.

Answer 1

Yeah React Router hat onEnter und onLeave Hooks. Sie können Ihre Routen bauen Ihre store Beispiel zu nehmen, so dass Sie es in diesen Helfer zugreifen:

const createRoutes = (store) => { 
    const fetchPosts =() => store.dispatch({ 
    types: ['FETCH_POSTS', 'FETCH_POSTS_SUCCESS', 'FETCH_POSTS_FAIL', 
    url: '/posts' 
    }); 

    return (
    <Route path="/" component={App}> 
     <Route path="posts" component={PostList} onEnter={fetchPosts}/> 
     <Route path="posts/:id" component={PostDetail} /> 
    </Route> 
) 
} 

Eine bessere Lösung ist so etwas wie redial oder redux-async-connect zu verwenden. Auf diese Weise können Sie die Datenabhängigkeiten Ihrer Komponente mit Ihren Komponenten gemeinsam lokalisieren, während Sie gleichzeitig die Möglichkeit haben, Ihre Komponenten zu testen, ohne das Netzwerk zu berühren.