React Redux Store updating, but component not re-rendering React Redux Store updating, but component not re-rendering reactjs reactjs

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.