Redux updates state (in reducers), but React components do not re-render? - reactjs

Question

This is quite peculiar because in my reducers, I made sure I was not mutating state; A common issue with this particular problem. However, I still keep getting this issue. On the initial load of the application (using npm start). In the photo below you can see that I console.log every component right before the return statement as a test to see if the components render. But despite state being updated, the component never re-renders.... (I'm confident the containers are set up properly and the components are called.)
AllGiftsDisplay
import OneGiftDisplay from './OneGiftDisplay.jsx';
const AllGiftsDisplay = (props) => {
console.log("LOADING");
let individualGifts = [];
for(let i = 0; i < props.giftList.length; i++) {
individualGifts.push(
<OneGiftDisplay
addGift = {props.addGift}
updatedGiftMessage = {props.updateGiftMessage}
setNewMessage = {props.setNewMessage}
totalVotes = {props.totalVotes}
/>
)
}
// let list = [<OneGiftDisplay/>, <OneGiftDisplay/>]
return (
<div className = "displayAllGifts">
{/* {console.log("~~~giftlist length", props.giftList.length)} */}
{individualGifts}
{/* {list} */}
</div>
)
};
export default AllGiftsDisplay;
Gift Reducers
import * as types from '../constants/actionTypes.js';
const initialState = {
giftList: [],
lastGiftId: 10000,
totalVotes: 0,
newMessage: ''
};
const giftReducer = (state=initialState, action) => {
// let giftList;
// let setMessage;
switch(action.type) {
case types.ADD_GIFT:
let stateCopy = { ...state }; // shallow copy
// create the new gift object structure.
const giftStructure = {
// lastGiftId: stateCopy.lastGiftId,
newMessage: stateCopy.newMessage,
totalVotes: 0
};
// push the new gift onto the list.
stateCopy.giftList.push(giftStructure);
// console.log("giftList: ", stateCopy.giftList);s
// return updated state
return {
...stateCopy,
newMessage: ''
}
case types.SET_MESSAGE:
return {
...state, newMessage: action.payload,
}
case types.ADD_VOTE:
case types.DELETE_GIFT:
default:
return state;
}
};
export default giftReducer;
ListContainer
import React, { Component } from 'react';
import { connect } from 'react-redux';
// import actions from action creators file
import * as actions from '../Actions/actions';
import AllGiftsDisplay from '../Components/AllGiftsDisplay.jsx';
import GiftCreator from '../Components/GiftCreator';
const mapStateToProps = (state) => ({
lastGiftId: state.gifts.lastGiftId,
giftList : state.gifts.giftList,
totalVotes: state.gifts.totalVotes,
setNewMessage: state.gifts.setNewMessage
});
//pass in text into update
const mapDispatchToProps = dispatch => ({
updateGiftMessage: (e) => {
console.log(e.target.value);
dispatch(actions.setMessage(e.target.value));
},
addGift: (e) => {
e.preventDefault();
console.log("actions: ", actions.addGift);
dispatch(actions.addGift());
}
});
class ListContainer extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div className="All-Lists">
<h1>LIST CONTAINER!</h1>
<AllGiftsDisplay giftList = {this.props.giftList} addGift={this.props.addGift} setNewMessage={this.props.setNewMessage} totalVotes = {this.props.totalVotes} lastGiftId = {this.props.lastGiftId}/>
<GiftCreator setNewMessage={this.props.setNewMessage} updateGiftMessage={this.props.updateGiftMessage} addGift={this.props.addGift}/>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ListContainer);

Answer 1

The secret is to avoid mutating giftList.
const giftReducer = (state=initialState, action) => {
// let giftList;
// let setMessage;
switch(action.type) {
case types.ADD_GIFT:
// create the new gift object structure.
const giftStructure = {
// lastGiftId: stateCopy.lastGiftId,
newMessage: stateCopy.newMessage,
totalVotes: 0
};
return {
...state,
giftList: [...state.giftList, giftStructure],
newMessage: ''
}
case types.SET_MESSAGE:
return {
...state, newMessage: action.payload,
}
case types.ADD_VOTE:
case types.DELETE_GIFT:
default:
return state;
}
};
To better understand why it's necessary not to mutate the array, consider this example:
const arr = [1, 2, 3];
const b = { a: arr };
const c = { ...b };
c.a.push(4);
console.log(arr === c.a); // outputs true