javascript - Edit Field not working & Managing form values using redux store - redux-form -
i using redux-form v6.7.0. referred link , tried load data asynchronously on button click not working expected. used change method in componentwillreceiveprops after using unable edit field.
i don't know using change method , appropriate way of managing redux-form. pfb sample code snippet loaded personname using change method in componentwillreceiveprops , after unable edit field. personage, field working fine didn't used change method it.
also, wanted synchronize changed form values redux store (means keep each , every change updated redux store).
any appreciated. in advance.
/* reducers should maintain immutability */ function personinforeducer(state = { personname: "", personage: "" }, action) { switch (action.type) { case "save_person_data": return object.assign({}, state, action.payload); default: return state; } } /* save person data action */ var savepersondata = (data) => { return { type: "save_person_data", payload: data }; }; /* form sample component */ class formsample extends react.component { componentdidmount() { } componentwillreceiveprops(nextprops) { //console.log(nextprops); const { change } = this.props; //debugger; if(nextprops.initialvalues) { change("personname", nextprops.initialvalues.personname); //change("personage", nextprops.initialvalues.personage); } } loadpersondata() { const { initialize, savepersondata } = this.props; var personinfo = { personname: "abraham", personage: 21 }; savepersondata(personinfo); } render() { return ( <form> <reduxform.field name="personname" component="input" type="text" placeholder="person name" /> <reduxform.field name="personage" component="input" type="text" placeholder="person age" /> <button type="button" onclick={() => this.loadpersondata()}>load</button> <h5>values:</h5>{json.stringify(this.props.formvalues)} </form> ); } } formsample = reduxform.reduxform({ form: "formsample", // unique identifier form })(formsample); const selector = reduxform.formvalueselector("formsample"); function mapstatetoprops(state) { const { personinfo } = state; return { initialvalues: personinfo, formvalues: selector(state, "personname", "personage") }; } function mapdispatchtoprops(dispatch) { return redux.bindactioncreators({ savepersondata }, dispatch); } formsample = reactredux.connect(mapstatetoprops, mapdispatchtoprops)(formsample); const allreducers = redux.combinereducers({ form: reduxform.reducer, personinfo: personinforeducer }); const store = redux.createstore(allreducers); reactdom.render(<reactredux.provider store={store}><formsample /></reactredux.provider>, document.getelementbyid("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.7.0/redux-form.min.js"></script> <div id="root"></div>
i ending solution:). pfb code snippet.
/* form sample component */ class formsample extends react.component { componentwillreceiveprops(nextprops) { //const { change, initialize } = this.props; } loadpersondata() { const { initialize, savepersondata } = this.props; var personinfo = { personname: "abraham", personage: 21 }; savepersondata(personinfo); } loadanotherdata() { const { savepersondata } = this.props; var personinfo = { personname: "gnanasingh", personage: 23 }; savepersondata(personinfo); } submit() { const { formvalues, savepersondata } = this.props; savepersondata(formvalues); } render() { const { formvalues, personinfo } = this.props; return ( <form> <reduxform.field name="personname" component="input" type="text" placeholder="person name" /> <reduxform.field name="personage" component="input" type="text" placeholder="person age" /> <button type="button" onclick={() => this.loadpersondata()}>load</button> <button type="button" onclick={() => this.loadanotherdata()}>load another</button> <button type="button" onclick={() => this.submit()}>submit</button> <h5>form values:</h5>{json.stringify(formvalues, null, 2)} <h5>store values:</h5>{json.stringify(personinfo, null, 2)} </form> ); } } formsample = reduxform.reduxform({ form: "formsample", // unique identifier form enablereinitialize: true })(formsample); const selector = reduxform.formvalueselector("formsample"); function mapstatetoprops(state) { const { personinfo } = state; return { initialvalues: personinfo, formvalues: selector(state, "personname", "personage"), personinfo }; } function mapdispatchtoprops(dispatch) { return redux.bindactioncreators({ savepersondata }, dispatch); } formsample = reactredux.connect(mapstatetoprops, mapdispatchtoprops)(formsample); /* reducer should maintain immutability */ function personinforeducer(state = { personname: "", personage: "" }, action) { switch (action.type) { case "save_person_data": debugger; return object.assign({}, state, action.payload); default: return state; } } /* save person data action */ var savepersondata = (data) => { return { type: "save_person_data", payload: data }; }; const allreducers = redux.combinereducers({ form: reduxform.reducer, personinfo: personinforeducer }); const store = redux.createstore(allreducers); reactdom.render(<reactredux.provider store={store}><formsample /></reactredux.provider>, document.getelementbyid("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.7.0/redux-form.min.js"></script> <div id="root"></div>
Comments
Post a Comment