更新状态后未重新渲染组件（调用了mapStateToProps）

Question

I'm having a trouble updating the state. I'm using redux so the state is updated on the reducer level. After updating the state from another component a new state is returned with new data. mapStateToProps is called but the component is not re-rendering.

This is my component

class Users extends Component {

    render() {
        console.log("RENDERING ------");
        const usernames= this.props.usernames.map((username, key) => {
            return (<div key={key} className="card mt-2">
                <div className="card-body">
                    {username}
                </div>
            </div>)

        })

        return (
            <div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
                {usernames}
            </div>

        )

    }

}


const mapStateToProps = state => {
    console.log("STATE", state);
    return {
        usernames: state.usernames.data
    }
}


export default connect(mapStateToProps, null)(Users);

when loading the component the usernames are displayed. but adding a new username from another component the mapStateToProps is called but the component is not re-rendered.

Parent Component

class Parent extends Component {

    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col">
                        <Editor />
                    </div>
                    <div className="col">
                        <Users />
                    </div>
                </div>

            </div>
        )
    }

This is the editor component where I'm dispatching the action

class Editor extends Component {

    state = {
        user: ""
    }

    handleChange = event => {
        this.setState({ user: event.target.value });
    }

    onSubmit = e => {
        e.preventDefault();
        this.props.addUser(this.state.user);
    }

    render() {
        return (
            <form onSubmit={this.onSubmit}>
                <div className="form-group">
                    <label htmlFor="exampleFormControlTextarea1">User</label>
                    <textarea className="form-control" id="exampleFormControlTextarea1" rows="3" value={this.state.user} onChange={this.handleChange} ></textarea>
                </div>
                <button type="submit" className="btn btn-primary mb-2">Submit</button>

            </form>
        )
    }
}

const mapDispatchToProps = dispatch => {
    return {
        addUser: (user) =>
            dispatch(addUser(user))
    }
}

export default connect(null, mapDispatchToProps)(Editor);

Answer 1

You are mapping the usernames prop in your mapStateToProps , but not making use of it in your component. You are in fact creating a new variable called usernames and assigning it to the result of a map on this.props.messages .

Forgive me if I'm not understanding what you're trying to do, but it looks like you should just make use of this.props.usernames , and then when you update it through a dispatch , the prop will update and in turn the component will re-render.

Answer 2

After trying and searching online. I discovered that the problem was that the component re-render if mapStateToProps returns a different value from the last call. For my case I was handling my state on a mutable way. I was using push to add new user to the state on the reducer. The solution is to do it in the immutable way using concat:

const us = [];
us.push(action.results.user);
return { ...state, users: state.users.concat(us) };