Estoy usando Redux-Toolkit en React.
Estoy tratando de almacenar una serie de objetos en mi tienda redux que será una lista de mensajes de chat.
Aquí está mi clientSlice.js (donde se crean mis acciones)
export const clientSlice = createSlice({ name: 'client', initialState: { messages: [] }, reducers: { //Add message to list of messages setAddMessage: (state, action) => { state.messages.push(action.payload); } }, });Puedo agregar objetos a la matriz usando useDispatch(setAddMessage(message))
En mi message.js puedo mapear los mensajes en mi HTML así:
const messages = useSelector(selectMessages); {messages ? ( [...Object.values(messages)] .sort((a, b) => a.time - b.time).map((message) => ( <div key={message.id} className="message-container" > <span className="message-user">{message.user}</span> <span className="message-content">{message.value}</span> <span className="message-date">{new Date(message.time).toLocaleTimeString()}</span> </div> )) ) : (<div></div>)}Funciona bien... mis mensajes aparecen en la interfaz.
Sin embargo, mi problema surge cuando intento y console.log (mensajes) de mi archivo Messages.js. me sale la respuesta:
Array [] length: 0 <prototype>: Array []Aunque mis mensajes continúan apareciendo desde el mapeo de "mensajes"... registra una longitud de 0.
Además, si trato de hacer algo como
console.log(messages[1]) -undefined¿Qué me estoy perdiendo aquí, chicos?
Hola, deberías cambiar la etiqueta del selector en tus mensajes.js a esto
const count = useSelector((state) => state.name)Donde nombre es el nombre del reductor de su configuración redux