Puedo cambiar un elemento en mi lista si el valor de la propiedad booleana del elemento cambia, mi lista se actualiza. Sin embargo, si trato de cambiar una propiedad de cadena y devuelvo la carga útil, mi lista no se actualiza.
Esto funciona cuando cambio directamente el artículo y lo devuelvo.
case UPDATED_LISTITEM: let newList = state.list.filter((item) => { if (item._id !== payload._id) { return item; } else { item.title = payload.title; item.checked = payload.checked; return item; } }); return { ...state, list: newList, };Esto no funciona cuando trato de devolver la carga útil y solo actualizo el 'título'. Si actualizo el 'marcado', el estado vuelve correctamente.
case UPDATED_LISTITEM: return { ...state, list: state.list.filter((item) => { if (item._id !== payload._id) { return item; } else { return payload; } }), };Hay un par de problemas diferentes aquí.
Una es que este código está mutando el item , y eso nunca se permite cuando se usa Redux:
item.title = payload.title; item.checked = payload.checked;Redux requiere actualizaciones inmutables, lo que significa hacer siempre copias de los datos.
Otra es que está utilizando el método de matriz incorrecto. Está llamando a list.filter() , pero siempre está devolviendo artículos. Creo que quieres usar list.map() en su lugar.
Más allá de eso, me temo que el estilo de código Redux que estás escribiendo está muy desactualizado. Parece que está "escribiendo a mano" sus reductores, actualizaciones inmutables y tipos de acción.
Hoy, enseñamos "Redux moderno" con Redux Toolkit y la API de ganchos React-Redux, que es mucho más simple de aprender y usar. El código que está escribiendo se ejecutará , pero requerirá escribir al menos 4 veces más código y será más confuso.
Recomiendo encarecidamente leer nuestros tutoriales oficiales de documentos de Redux, que enseñan Redux Toolkit y React-Redux hooks como el enfoque estándar:
Versión sin mutar el estado:
case UPDATED_LISTITEM: return { ...state, list: state.list.map((item) => ({ ...item, // item must not contain more deeply nested objects! // Update title and checked from payload ...( item._id === payload._id ? { title: payload.title, checked: payload.checked } : {} ) }), }; Como decía la otra respuesta, es más fácil con el kit de herramientas redux. La forma antigua consiste en reconstruir cuidadosamente el estado, con un uso intensivo del operador de propagación ( ... ). Es propenso a errores con objetos profundamente anidados.