Wie kann ich den Reduzierungsstatus zurücksetzen, wenn Sie in einem Webbrowser zurückgehen?

Question

Das ist mein Anwendungsfall:

Im WelcomeScreen ich Code wie diese:

class WelcomeScreen extends Component { 
    render() { 
    const { 
     checkoutState, 
    } = this.props; 

    if (checkoutState.status === TRYING_TO_BUY) { 
     return this.renderPurchaseForm(plan); 
    } 

    return this.renderWelcome(); 
    } 

Wenn der Benutzer Besuch /welcome, kann er einen Kauf Knopf drücken, die eine Aktion versenden und stellen Sie die checkoutState.status zu TRYING_TO_BUY. Die Welcome wird durch den Aufruf renderPurchaseForm

Innerhalb renderPurchaseForm erneut gerendert werden, wird es eine ArticlePurchaseBlock

renderPurchaseForm() { 
    const { articleId } = this.props; 
    return (
    <ArticlePurchaseBlock 
     articleId={articleId} 
    /> 
    ) 

und in den Block machen, wird die Klasse versuchen, die URL zu aktualisieren, um anzuzeigen, dass es in einer Eingabemaske ist

import { withRouter } from 'react-router'; 

class ArticlePurchaseBlock extends Component { 

    componentWillMount() { 
    const { history } = this.props; 
    history.push(URL_BUY_ARTICLE); 
    } 

    render() { 
    // render a redux-form 
    } 
} 
export default withRouter(ArticlePurchaseBlock); 

Sie können sehen, history.push(URL_BUY_ARTICLE); heißt componentWillMount.

Jetzt ist das Problem: wenn der Benutzer in der Kaufformular, wenn ein Benutzer zurück zur vorherigen URL (/welcome) gehen will, kann er nicht. Das liegt daran, dass der Zustand checkoutState.status immer noch TRYING_TO_BUY ist. Die Begrüßung wird immer an die Form übergeben.

Gibt es irgendwelche, wo innerhalb der ArticlePurchaseBlock ich kann das Zurückgehen Ereignis überwachen und den Zustand aufheben? Ich plane nicht, redux-saga-router noch wegen der Zeitbeschränkung zu verwenden.

I react-router v4

Answer 1

bin mit entwarf ich einen Router für genau dieses Problem. Es ist übermäßig schwierig mit react-router. https://github.com/cellog/react-redux-saga-router. Für Ihren Code:

https://gist.github.com/cellog/0731f7e1ba8f9009f6b208c2bd15aa16

Das Ganze kann in 1 Codezeile erfolgen und Ihre Routen sehen fast identisch zu-Router zu reagieren, mit 1 zusätzlichen Zeilen für die Zuordnung param oder URL-Änderung zum Handeln.