Utilizzo di Redux Form con React Router

Question

Ho girato le mie ruote per un po 'ora cercando di capire il modo migliore per fare tutto questo. Ecco la mia situazione:

Sto usando un mix di React Router e Redux Form per creare login/creare pagine di account.

export default (
    <Route path='/' component={App}> 
    <IndexRoute component={Signup} /> 
    <Route path='signup_verify' component={SignupVerify} /> 
    </Route>  
); 

Quando si carica la home page che mostra i campi per creare un account

Io uso Reagire Modulo per convalidare i campi e una volta che tutto è ok io sì

onSubmit() { 
    this.context.router.push('/signup_verify') 
} 

spingendoli così alla prossima e ultima pagina della procedura guidata. In questa seconda pagina ho un input disabilitato che voglio popolare con il nome che mi hanno dato nella forma precedente. Come diavolo ottengo il nome che l'utente ha inviato per comparire in questa seconda pagina?

Reagire parla Forma sull'utilizzo decoratori:

@reduxForm({ 
    form: 'myForm' 
}) 

http://redux-form.com/5.2.4/#/api/get-values?_k=eo04uv

https://github.com/erikras/redux-form/issues/260#issuecomment-155852315

Ho impostato il mio ambiente per essere in grado di utilizzare i decoratori, ma quando provo ad implementare lo stesso codice di un poche righe sopra a un errore dicendo:

Warning.js: 45 Avviso: propTyp non riuscito e: il prop fields non valido del tipo object fornito a ReduxForm(Signup), prevede un array. Controllare il metodo rendering di Connect(ReduxForm(Signup)) .warning @ warning.js: 45 getValues.js: 59

e

TypeError Uncaught: fields.reduce non è una funzione

La mia prima pagina, in cui lo screenshot è venuto da, sembra MOLTO simile a WizardFormFirstPage.js (http://redux-form.com/5.2.4/#/examples/wizard?_k=y8mg56). In che modo WizardFormSecondPage visualizza i dati da WizardFormFirstPage in un input disabilitato?

So che è molto, ogni aiuto è molto apprezzato! Anche qualsiasi feedback su come farlo in un altro modo sarebbe fantastico, o in su il mio attuale approccio.

Answer 1

Dopo un paio di log della console ho scoperto che il valore di ingresso dalla prima pagina sopravviverà alla pagina successiva IF:

1) esportare tutti i campi sulla prima pagina, o almeno voi uno voglio accedere. IE:

export const fields = ['name', 'email', 'company'];

2) Specificare il destroyOnUnmount: false flag per conservare i dati del modulo tra i vari componenti del modulo.

3) Estrarre gli oggetti di scena dalla pagina successiva dalla procedura guidata. IE: const {campi: {nome}, handleSubmit} = questo.puntelli;

Quindi si avrà accesso ad esso sotto thing.value. IE:

nome.valore equivale a qualsiasi cosa inserisco nel nome inserito nella prima pagina.

Documenti per maggiori informazioni: http://redux-form.com/5.2.4/#/examples/wizard?_k=y8mg56

Answer 2

Impostare l'opzione destroyOnUnmount: false nel vostro reduxForm() decoratore.

In secondo luogo, è consigliabile utilizzare il pacchetto react-redux. Ha una funzione chiamata connect() che ti consente di passare lo stato agli oggetti di scena.

const mapStateToProps = (state) => { 
    return { 
    name: state.form.myForm.name, 
    email: state.form.myForm.email, 
    company: state.form.myForm.company 
    } 
}; 

const SignupVerify = connect(mapStateToProps)(SignupVerify) 

Sostituire SignupVerify con il nome del componente.

state.form.myForm cambierà a seconda di quali proprietà immessi per reduxForm()

Redux usage with React

Redux-Form wizard example