javascript - react+redux: state of store changed without view changing -
i try use react-redux
. use connect
in tutorial. have 2 modules export default connect(...)(...)
. when dispatched in 1 module dev-tools show changing , new state, view of module don't changed.
app.js
const app = (props) => { return ( <div> <userform /> <flexgrid> {props.teststore.persons.map((data, index) => <personcard data={data} key={index} /> // <!-- not changed )} </flexgrid> </div> ); } export default connect( state => ({ teststore: state }), dispatch => ({}) )(app);
userform.js
const userform = (props) => { let nameinput, familyinput, patronymicinput; const adduser = () => { props.adduser({ name: nameinput.value, family: familyinput.value, patronymic: patronymicinput.value }); } return (...); } export default connect( state => ({ teststore: state }), dispatch => ({ adduser: (data) => { dispatch({ type: 'add_user', data}); } }) )(userform);
how fix it?
you mutating state in reducer. need keep state immutate this
function storechangehandler(state = stateinit, change) { if (change.type === 'add_user') { return{ ...state, persons: [...state.persons, change.data] }; } return state; }
Comments
Post a Comment