Tengo una matriz dentro del objeto de estado del que necesito insertar o empalmar elementos. ¿Cómo podemos implementarlo sin mutar la gama de productos? Algo como esto funcionaría?

const Cart = (state = [], action) => {
  switch (action.type) {
    case 'ADD_PRODUCT':
      return {
        ...state,
        products: [...state.products, action.product]
      }

    case 'REMOVE_PRODUCT':
      return {
        ...state,
        products: [
          ...state.products, ...state.products.slice(0, action.index).concat(state.products.slice(action.index + 1))
        ]
      }
  }
}

export default Cart
0
IVI 23 oct. 2017 a las 12:03

3 respuestas

La mejor respuesta

Sí, esto funcionará, ya que no muta su estado actual y siempre devuelve un estado nuevo. Extra: asegúrese de agregar también

  default:
    return state

Para evitar la pérdida de estado cuando lanzas una acción que no está definida en tu reductor.

1
sn_92 23 oct. 2017 a las 09:13

Puede escribir el caso de eliminación de una mejor manera como esta, sin embargo, hay un pequeño cambio que deberá hacer. En lugar de pasar index en acción, pase value para eliminarlo (una forma mucho más limpia de hacer las cosas):

case 'REMOVE_PRODUCT':
  return {
    ...state,
    products: state.products.filter(item => item !== action.value)
  }

Déjeme saber si esto ayuda

0
Vishal Sharma 23 oct. 2017 a las 09:20

Su código funcionará, sin embargo, sería más limpio hacerlo como

case 'REMOVE_PRODUCT':
  return {
    ...state,
    products: [
      ...state.products.slice(0, action.index),
      ...state.products.slice(action.index + 1)
    ]
  }
default: return state

Además, como @ sn_92 señaló que debe tener una condición predeterminada en caso de que llame a una acción que no está definida en el reductor anterior.

1
Shubham Khatri 23 oct. 2017 a las 09:49