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...

you can try to handle with props changing in ModalExample component, by using componentWillReceiveProps method.. or can you show some code of ModalExample. — Pei Han
as i updated redux store state via ModalExample , changed state is clearly shown in reduxDevtool and mapStateToProps plus even console.log(this.props.data) is showing changes but the problem is its not passing props inside opened modalbox(modalExample) or say its not rendering component ... — Bijay Rai

Bijay Rai Bijay Rai · Accepted Answer · 2017-04-25T07:24:39

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.

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

2 Answers