Come ripristinare lo stato sul pulsante Indietro con reazione

Question

Se si dispone di un componente di semplice risposta che registra un conteggio dei clic per un pulsante e su ciascun clic registra un nuovo stato della cronologia senza modificare l'URL. Quando l'utente fa clic su come ripristinare lo stato come era?

Posso fare come è qui utilizzando l'oggetto di cronologia JavaScript nativo, ma non riesce quando l'utente passa nuovamente al primo stato e torna da un altro componente all'ultimo stato di questo.

Sospetto che sia meglio fare ciò utilizzando react-router (1.0)?

import React, { Component } from 'react'; 

export default class Foo extends Component { 
    state = { 
    clickCount: 0, 
    }; 

    componentWillMount() { 
    window.onpopstate = (event) => { 
     if (event.state.clickCount) { 
     this.setState({ clickCount: event.state.clickCount }); 
     } 
    }; 
    } 

    onClick() { 
    const newClickCount = this.state.clickCount + 1; 
    const newState = { clickCount: newClickCount }; 
    this.setState(newState); 
    history.pushState(newState, ''); 
    } 

    render() { 

    return (
     <div> 
     <button onClick={this.onClick.bind(this)}>Click me</button> 
     <div>Clicked {this.state.clickCount} times</div> 
     </div> 
    ); 
    } 
} 

Answer 1

localStorage o anche i cookie sono opzioni, ma probabilmente non il modo migliore. È necessario memorizzare il conteggio in un database, in questo modo è possibile impostare lo stato iniziale nel costruttore sull'ultimo valore salvato nel database.

Un'altra opzione, se è necessario solo mantenere il conteggio sul lato client (e non in un database) sta utilizzando una chiusura.

// CountStore.js 
var CountStore = (function() { 
    var count = 0; 

    var incrementCount = function() { 
    count += 1; 
    return count; 
    }; 

    var getCount = function() { 
    return count; 
    }; 

    return { 
    incrementCount: incrementCount, 
    getCount: getCount 
    } 

})(); 

export default CountStore; 

Quindi il codice cambierà in seguito.

import React, { Component } from 'react'; 
import CountStore from './CountStore'; 

export default class Foo extends Component { 
    state = { 
    clickCount: CountStore.getCount() 
    }; 

    componentWillMount() { 
    window.onpopstate = (event) => { 
     if (event.state.clickCount) { 
     this.setState({ clickCount: event.state.clickCount }); 
     } 
    }; 
    } 

    onClick() { 
    const newClickCount = CountStore.incrementCount(); 
    const newState = { clickCount: newClickCount }; 
    this.setState(newState); 
    } 

    render() { 

    return (
     <div> 
     <button onClick={this.onClick.bind(this)}>Click me</button> 
     <div>Clicked {this.state.clickCount} times</div> 
     </div> 
    ); 
    } 
} 

Potrebbe esserci un modo più pulito con il router di risposta, ma questa è un'opzione.