REACT + REDUX: when the reduction state of mapStateToProps changes, the state is updated, but the view is not performed according to the new state
there is my container that gets the state via redux store.
I am passing this state to the 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 works fine ... There is a list of commands and an input field with an add button inside the modal box.so, when I do a specific add method inside the Modalbox component and the update state, there I see a state change in reduxDevTool and even the state is a change in mapStateToProps , but The Modal box command list is not updated or it is said that modalbox props do not receive new props according to 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 tried to pass props inside ModalExample using this way
team={this.props.data} , team={team}
but still the Modal example is not updated.
Confusing: If I close and open ModalBox or type in the inner input field of the modal, then there is a change according to our new state ... But I want the instant view of the modal to display according to our reduction state change ...
source to share
In Redux, state change happens with some actions and reducers.
You can find them in the documentation for reduction here Actions and Reducers .
You choose a team from the store. If you just update the command object, it will not change the state. It will just change the object. To change the state, you need some kind of action that will carry some kind of payload.
For example, the action "UPDATE_TEAM_NAME" will carry the newName as a payload, and the reducer (pure function) will return a new command object.
In addition to this, if you are not updating the command object in the container, I would suggest that you get your command object in the ModelExample component rather than passing it as a props from the container. This will make everything clearer.
source to share
I'm not sure if this is the best way or not. But recently I solved my problem like this ...
Actually my redux store state was like :
user: {
data: [
id: 1,
key: 'exampleKey',
name: 'exampleName',
team: [
{email: 'one', role: 'one'},
{email: 'two', role: 'two'}
]
],
error: null
}
so, whenever I update the array of repository state commands 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 modified redux state can be easily seen in reduxDevTool
and in the container mapStateToProps I was handling state like this,
where console.log(state.signup.user.data)
even shows changes in state, but that doesn't call the componentWillReceiveProps, so my view was not showing ...
const mapStateToProps = (state) => {
return {
user: state.signup.user.data,
};
};
I finally solved this problem by specifying another state in mapStateToProps
const mapStateToProps = (state) => {
return {
user: state.signup.user.data,
teamMember:state.signup.user.data.team,
};
};
launches componentWillReceiveProps and instantly displays my view.
source to share