React componentWillReceiveProps will receive props not triggering when redux state updates - reactjs

Question

I've got a store which holds actions, these actions are suppose to be looped through each time a new one is added.
I've got a component MessageListView which resides in a parent called MessageView. When a new action is added to my socketActions.queue array, the componentWillRecieveProps is suppose to trigger, but it doesn't.
Here is what my reducer looks like:
/* Reducer */
const initialState = {
queue: [{
type: 'alert',
action: 'alert',
completed: false, // Set to true or just delete this object when the action has been completed
data: {
message: "the data object dynamically changes based on the type"
}
}]
};
export default (state = initialState, action) => {
switch (action.type) {
case ADD_ACTION:
let queue = state.queue
// action.data['completed'] = false
queue.push(action.data)
console.log("Just updated queue", action.data)
return {
...state,
queue: queue,
latestAction: new Date()
}
My component is connected up to the store like this:
function mapStateToProps(state){
console.log(state, "State inside messagelistview.js")
return {
actionsQueue: state.socketActions.queue,
latestAction: state.socketActions.latestAction
}
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ completeAction }, dispatch);
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(MessageListView);
So when I dispatch a new ADD_ACTION action, my state updates & redux-logger prints out the new and old state which is telling me that they're the same?! . I don't know why it'd be doing this after I've changed the latestAction value & queue array. This is why the componentWillRecieveProps isn't working, but I can't figure out why the state is the same?!

Answer 1

Not 100% certain if this would solve anything, but I think you aren't properly copying over state.queue into the completely new variable queue.
I'd suggest doing something like:
let queue = state.queue.slice()
... and see if anything changes? Right now your queue variable is still the same as the state.queue

Answer 2

You don't change queue identity in reducer. Try this code:
case ADD_ACTION:
let queue = state.queue
// action.data['completed'] = false
queue.push(action.data)
console.log("Just updated queue", action.data)
return {
...state,
queue: [...queue], // <-- here we copy array to get new identity
latestAction: new Date()
}
You should always shallow copy changed objets. See http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments

Answer 3

A connected component does a shallow check (===) whether the state is updated and renders wrapped component only if that check fails. In your case, you're mutating your queue causing the equality the check to pass.
It will work if you change your reducer like this:
state.queue = state.queue.concat(action.data);
or with ES6 syntax:
state = { ...state, queue: [...state.queue, action.data] };

Answer 4

The problem is that you are mutating your state when you do this:
let queue = state.queue
// action.data['completed'] = false
queue.push(action.data)
When you mutate the existing state directly, Redux doesn't detect a difference in state and won't notify your components that the store has changed.
So instead you've the following options to create a new queue array:
case ADD_ACTION:
return {
...state,
queue: state.queue.concat(action.data),
latestAction: new Date()
}
or with ES6 sugar:
case ADD_ACTION:
return {
...state,
queue: [...state.queue, action.data]
latestAction: new Date()
}