React Redux Store updating, but component not re-rendering
I had a similar problem, just in case someone stumbles upon this, I needed to clone the array in order to re-render the view:
export const addFieldRow = () => ( (dispatch: any, getState: any) => { const state = getState(); const myArrayOfObjects = myArrayOfObjectsProp(state); const newObject = { key: "", value: "", }; myArrayOfObjects.push(newObject); dispatch(addFieldRowAction({ myArrayOfObjects: [...myArrayOfObjects] })); <== here });
I use this solution to do it.I put the users on my state and update it on any change, with componentWillReceiveProps. Hope it helps :-)
class UserList extends React.Component { constructor(props) { super(props); console.log(this.props); this.state = { users: props.users }; } componentWillReceiveProps(nextProps) { if (this.props.users !== nextProps.users) { this.setState({ users: nextProps.users, }); } } render() { const { users } = this.state; const userItems = users.map((user, idx) => { return(<li key={idx}>{user.username}</li>); }); return ( <div> <ul> { userItems } </ul> </div> ); }}export default UserList;
Common problem in this case is using not reactive operations for changing state. For example use concat() for array, but not push() and so on.