REACT + REDUX: on redux state change mapStateToProps updating state but view is not rendering as per new state

Question

there is my container which is getting state via redux store .

I am passing this state to modal box via props like this : Example:

render(){
  let {team,id} =this.props.data;
    return(
    <div>
    <ModalExample isOpen={this.state.isOpen} team={team} id={id}
modalClose={this.modalClose.bind(this)} 
handleAddTeam={this.handleAddTeam.bind(this)}/>
        </div>
        )}

for the first time its working perfectly... There is team list and input field with add button inside modal box.so, when i do certain add method inside Modalbox component and update state ,there i can see state change in reduxDevTool and even state is change in mapStateToProps but Modal box team list is not updated or say modalbox props doesnt recieve new props as per state change...

even in this container

render(){
  let {team,id} =this.props.data;
    console.log(this.props.data) **//Here state change is shown**
    console.log(team) **//Here state is not changed**
    return(
    <div>
    <ModalExample isOpen={this.state.isOpen} team={team} id={id}
modalClose={this.modalClose.bind(this)} 
handleAddTeam={this.handleAddTeam.bind(this)}/>
        </div>
        )}

plus i've tried to pass props inside ModalExample via both this way

team={this.props.data} , team={team} 

but still ModalExample view is not updating..

Confusing : If i close and open the ModalBox or type inside input field of modal box ,then there is change in view as per our new state... But i want instant modal box view render as per our redux state change...

Answer 1

I am not sure this is the best way or not. But recently I solved my problem like this...

Actually, my redux store state was like this :

user: {
    data: [
        id: 1,
        key: 'exampleKey',
        name: 'exampleName',
        team: [
            {email: 'one', role: 'one'},
            {email: 'two', role: 'two'}
        ]
    ],
    error: null
}

so, whenever I update redux store state team array like

user: {
    data: [
        id: 1,
        key: 'exampleKey',
        name: 'exampleName',
        team: [
            {email: 'one', role: 'one'},
            {email: 'two', role: 'two'},
            {email: 'three', role: 'three'}
        ]
    ],
    error:null
}

the changed redux state can be easily seen in reduxDevTool

and in container mapStateToProps I was handling state like this,

where console.log(state.signup.user.data) even show changes in the state but this does not call componentWillReceiveProps so, my view was not rendered...

const mapStateToProps = (state) => {
    return {
        user: state.signup.user.data,
    };
};

I finally solved this issue by defining one more state in mapStateToProps

const mapStateToProps = (state) => {
    return {
        user: state.signup.user.data,
        teamMember:state.signup.user.data.team,
    };
};

this triggers the componentWillReceiveProps and rendered my view instantly.

Answer 2

In Redux, state change happens with some actions and reducers.

You can find them in redux documentation here Actions and Reducers .

You are fetching team from the store. If you simply update the team object, it will not trigger any state change. It will simply change the object. To change the state you need some action which will carry some payload.

For example, "UPDATE_TEAM_NAME" action will carry newName as it's payload and a reducer(pure function) will return a new team object.

In addition to that, If you are not updating team object in the container, I would suggest you get your team object in ModelExample component rather than passing it as props from container. It'll make things clearer.