Soy un principiante en reaccionar y javascript en general. Y recientemente he estado siguiendo un tutorial de Youtube. En el tutorial, vi el siguiente código:
const reducer = (state, action) => { console.log(action) switch (action.type) { case 'ADD_TO_BASKET': // keep the state to be whatever it is, // and the basket is whatever it currently is plus the item passed inside. return { ...state, basket: [...state.basket, action.item], }; case 'REMOVE_FROM_BASKET': const index = state.basket.findIndex( (basketItem) => basketItem.id === action.id ); let newBasket = [...state.basket]; if (index >= 0) { newBasket.splice(index, 1); } else { console.warn( `Cant remove product (id: ${action.id}) as its not in the basket!` ) } return { ...state, basket: newBasket } default: return state; }Creo que entiendo lo que hace el código en un nivel alto, de modo que esto especifica cómo la función de reducción maneja diferentes solicitudes según el tipo de acción.
La parte que estoy confundiendo es, por lo que entiendo, la canasta es un atributo del estado, entonces por qué en la línea
return { ...state, basket: newBasket }es devolver la canasta junto con el estado, ¿por qué no podría ser algo como
return {estado.cesta: nuevacesta}
Gracias por leer mi pregunta hasta aquí, muchas gracias.
La sintaxis en cuestión devuelve un clon superficial de todo el objeto de state y state.basket con un valor de newBasket .
return { ...state, basket: newBasket }Por ejemplo:
const state = { basket: [], total: 0, user: null, }; const stateClone = { ...state, basket: ['apple'] }; stateClone ahora es { basket: ['apple'], total: 0, user: null } - Y es un nuevo objeto en la memoria.
El clon es necesario para que el reductor funcione correctamente, ya que los reductores dependen del estado inmutable. La forma mutable de actualizar state.basket sería:
state.basket = newBasket; return state; Sin embargo, esto muta el objeto de state original, actualizando la referencia en la memoria en lugar de crear una copia. Esto hará que el reductor funcione incorrectamente (por ejemplo, no detectará que el estado ha cambiado).
Aquí están los documentos de MDN sobre el operador de propagación al clonar un objeto: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals