State changes but doesn't call render function of parent component - reactjs

Question

# Its is my parent component i have dispatch the action from child component and state changes but render function of parent component does not called .
In child component every time when i click on checkbox then i dispatch the action for updating the state in reducer and i received new state in mapStatetoprop but it does not update the UI
const propTypes = {
teamPlayers : PropTypes.array.isRequired,
matchesData: PropTypes.object.isRequired,
isfetchingTeamPlayer: PropTypes.bool.isRequired
};
class CreateTeam extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedPlayerIDs : [],
count:0,
isforward:false,
show:false,
message:''
}
this.toggleChecked = this.toggleChecked.bind(this);
this.forwardRoute = this.forwardRoute.bind(this);
this.previousRoute = this.previousRoute.bind(this);
}
componentWillMount() {
this.props.createTeam(this.props.matchID);
}
renderPlayerCard() { console.log(this.props.teamPlayers)
let count = 0;
return this.props.teamPlayers.map((player) => {
if(player.isChecked){
count+=1;
}
let mtype = '';
return (
<PlayerCard
key={player.id}
player={player}
mtype={mtype}
count={count}
selectedPlayerIDs={this.state.selectedPlayerIDs}
triggerChanges={this.toggleChecked}
/>
);
})
}
render () {
if(!this.props.isfetchingTeamPlayer && !this.props.isPlayersFetching ){
return <h1>Loading...</h1>;
}
console.log("selected5Players"+this.props.selected5Players)
return(
<div>
<div className="card">
<div className="container-grey">
<div className="timer2">
<table className="timer-table2">
{
this.props.matchesData.end_time ?
<Counter
endDate={this.props.matchesData.end_time}
/> : null
}
</table>
</div>
<table className="team-table2">
<tr className="match-team">
<td className='team-logo-box'>
<div className="white-box">
{
this.props.matchesData.hasOwnProperty('teams') ?
<img className="team-logo2" alt="Team1"
src={this.props.matchesData.teams.home_team.flag_path}/>
:null
}
</div>
</td>
<td className="team-name2 left">{this.props.matchesData.teams.away_team.short_name}</td>
<td><img className="versus2" alt="versus" src={vs}/></td>
<td className="team-name2 right">{this.props.matchesData.teams.away_team.short_name} </td>
<td className='team-logo-box'>
<div className="white-box">
<img className="team-logo2" alt="Team2"
src={this.props.matchesData.teams.away_team.flag_path}/>
</div>
</td>
</tr>
</table>
</div>
<div className="player-list">
<table className="timer-table2">
<tbody>
{this.renderPlayerCard()}
</tbody>
</table>
</div>
</div>
<div className="foot-container">
</div>
</div>
);
}
}
CreateTeam.propTypes = propTypes;
const mapStateToProps = (state,ownProps) => {
// I am getting updated state here but doesn't call the render function//
console.log("state Changes but does not call the render function of this component")
return {
matchID: ownProps.params.teamID,
selected5Players: state.matchesTeam.selected5Players,
teamPlayers: selectedCheckedplayers(state),
matchesData: state.matchesTeam.matchesData,
isfetchingTeamPlayer: state.matchesTeam.isfetchingTeamPlayer,
isPlayersFetching: state.matchesTeam.isPlayersFetching
}
};
Below the code of child component where i dispatch the action
here i dispatching the action on every checkbox (handleChange() function ) see below
const propTypes = {
player: PropTypes.object.isRequired,
};
class PlayerCard extends React.Component {
handleChange(evt,id,isSelected) {
this.props.togglePlayersChecked({"player":this.props.player,"status":!isSelected})
}
render() {
return (
<tr>
<td className="batsmen-pic">
<img alt='batsmen' className='batsmen-picture' src={this.props.player.photo_url} />
</td>
<td className="batsmen-details">
<div className="batsmen-name left">
<div className="first-name">{this.props.player.name}</div>
</div>
</td>
<td className="batsmen-checkbox-holder">
<div>
<input className="batsmen-checkbox"
type="checkbox"
onChange={event => this.handleChange(event, this.props.player,this.props.player.isChecked)}
value={this.props.player.id}
checked={this.props.player.isChecked }
/>
</div>
</td>
</tr>
);
}
}
PlayerCard.propTypes = propTypes;
const mapStateToProps = (state,ownProps) => ({
selected5Players: state.matchesTeam.selected5Players,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
togglePlayersChecked
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(PlayerCard);
below the code of Reducer function of this action
const createTeamReducer = createReducer({
[createTeam]: (state) => ({
...state,
isfetchingTeamPlayer: true,
}),
[createTeam.error]: (state, error) => ({
...state,
teamPlayerError: error,
isfetchingTeamPlayer: false,
isPlayersFetching:true
}),
[createTeam.success]: (state, payload) => {
const teamPlayers = normalize(payload.players);
const matchesData = {...payload.match_data};
const isSaved = true;
return { ...state,matchesData, teamPlayers, isSaved ,isRefreshingTeamPlayer: false };
},
[togglePlayersChecked]: (state, payload) => { console.log(payload)
let teamPlayers = state.teamPlayers;
const isSaved = false;
let selected5Players = state.selected5Players;
if (payload.status) {
if (selected5Players.length >= 5){
//alert("You can't select more then five");
return { ...state, teamPlayers,selected5Players};
}else {
const index = teamPlayers.findIndex((player) => player.id === payload.player.id);
teamPlayers[index].isChecked = true;
selected5Players.push(payload.player);
}
} else {
const index = teamPlayers.findIndex((player) => player.id === payload.player.id);
console.log(index);
var c = selected5Players.findIndex((val) => val.id === payload.player.id);
selected5Players.splice(c,1);
console.log(selected5Players)
teamPlayers[index].isChecked = false;
}
return { ...state, teamPlayers,selected5Players,isSaved};
},
[get5player]:(state,payload) => {
const selectedTeamplayer = [...state.selected5Players];
const istwoSelected = true;
console.log(selectedTeamplayer);
return { ...state, selectedTeamplayer,istwoSelected};
},
[get5Batsmen2BestBatsmen]:(state,payload) => {
let select5BatsmenAnd2BestBatsmen = [];
return { ...state, select5BatsmenAnd2BestBatsmen};
},
[deleteTeam]:(state,payload) => {
let selected5Players = [];
let select2batsmen = [];
let teamPlayers = [];
const isSaved = true;
const select5BatsmenAnd2BestBatsmen = [];
return {...state, select2batsmen, selected5Players,teamPlayers,isSaved,select5BatsmenAnd2BestBatsmen};
}
}, initialState);
export default createTeamReducer;

Answer 1

You might be mutating the state inside reducer instead of returning new state. Hence the changes are not detected.