Estoy tratando de hacer un sitio web de comercio electrónico basado en carrito. Estoy usando Redux y Redux Toolkit para simplificar las cosas. Soy bastante nuevo en esto y mi código no funciona como se esperaba.

Estoy tratando de enviar datos al estado, pero el estado no se actualiza. Redux Devtools muestra que los datos se envían a la tienda, pero el estado sigue siendo el mismo.

En la acción, estoy registrando en la consola los elementos de estado y creo que el problema radica aquí y no puedo entenderlo.

 import { createSlice } from "@reduxjs/toolkit"; let initialState = [ { name: "", id: "", quantity: "", mode: "", bookType: "", }, ]; const cartSlice = createSlice({ name: "cart", initialState, reducers: { add: (state, action) => { return state.map((item) => { console.log(item); if (item.id !== action.payload.id) { return item; } return { ...item, added: true, }; }); }, remove: (state, action) => { return state.map((item) => { if (item.id !== action.payload.id) { return item; } return { ...item, added: false, }; }); }, }, }); export const { add, remove } = cartSlice.actions; export const getCart = (state) => state.cart; export default cartSlice.reducer;

Aquí está la salida de la consola:

Así es como estoy despachando en mi código:

 function formSubmit(event) { event.preventDefault(); const requiredCourse = courses[0]; const dispatchItem = { name: requiredCourse.name, id: requiredCourse.id, quantity: 1, mode: mode, bookType: bookType, }; if (userLoggedIn) { console.assert("About to dispatch"); dispatch(add(dispatchItem)); setTimeout(() => { Router.push("/cart"); }, 2000); } else { openModal(); setTimeout(() => { Router.push({ pathname: "/user/signup", query: { redirect: requiredCourse.url, }, }); }, 6000); } }

Cada ayuda es realmente apreciada.