My initial version did not use cloning. However useSelector() was not firing until I added another clone statement.
I thought that by cloning the containing object on a state change this would cause it tor fire. Particularly this line here.
let newState = { ...state };
That is a sub question. Why does not returning a new state cause useSelector to fire.
I had to add a second clone to get it to fire as follows:
const clone = [...newState.messages];
I find this behavior odd, and wonder if it might be a bug. Also not very efficient to have to clone my messages array.
The complete reducer is as follows:
const Messages = (state = {messages: false}, action) => {
let newState = { ...state };
switch(action.type) {
case 'initializeMessages':
newState.messages = action.messages;
return newState;
case 'addMessage':
// cloning is required to make useSelector() fire
const clone = [...newState.messages];
clone.unshift(action.message);
newState.messages = clone;
return newState;
}
return state;
};
and I use it as follows:
Updating
const messages = useSelector( (state) => state.Messages.messages );
Dispatching
dispatch({type: 'addMessage', message: message});
UPDATE
After updating to hooks, my reduces don't work anymore unless I clone embedded arrays. Before I did not have to do this:
you are right, you need to do the same for addMessage block like:
const newState = {
...state,
messages: [
...newState.messages,
action.message
]
};