Mi versión inicial no usaba clonación. Sin embargo useSelector() no se activaba hasta que agregué otra declaración de clonación.
Pensé que al clonar el objeto contenedor en un cambio de estado, esto haría que se disparara. Particularmente esta línea aquí.
let newState = { ...state };Esa es una pregunta secundaria. ¿Por qué no devolver un nuevo estado hace que useSelector se active?
Tuve que agregar un segundo clon para que se disparara de la siguiente manera:
const clone = [...newState.messages];Encuentro este comportamiento extraño y me pregunto si podría ser un error. Tampoco es muy eficiente tener que clonar mi matriz de mensajes.
El reductor completo es el siguiente:
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; };y lo uso de la siguiente manera:
Actualizando
const messages = useSelector( (state) => state.Messages.messages );despacho
dispatch({type: 'addMessage', message: message});ACTUALIZAR
Después de actualizar a ganchos, mis reducciones ya no funcionan a menos que clone matrices incrustadas. Antes no tenía que hacer esto:
tienes razón, debes hacer lo mismo para el bloque addMessage como:
const newState = { ...state, messages: [ ...newState.messages, action.message ] };