Ändra produktdata i Redux store

Vi har lärt oss att lägga till produkter, men vad händer om vi vill ändra informationen om en produkt? Låt oss ta en titt på hur man gör det i den här och de kommande lektionerna.

Öppna vår produktapplikation och gå till filen productsSlice.js. Vi börjar med att för products-slicen behöva skriva ytterligare en reducer, som kommer att triggas när en produkt uppdateras. Låt oss kalla den productUpdated och lägga till den i fältet reducers efter productAdded-reducern. Vi skickar också in parametrarna state och action direkt, som vi minns att reducern arbetar med:

products/productsSlice.jsreducers: {
  productAdded(state, action) {
    state.push(action.payload)
  },
  productUpdated(state, action) {},
},

Låt oss nu fundera på vilken data vi behöver för att uppdatera en produkt. Framför allt - ett id, med det kan vi hitta den aktuella produkten i store:n. Resten av datat - namn, beskrivning, pris och antal kommer vi att ha tillgängligt för ändring. Alla dessa värden kommer vi att få från egenskapen payload i action-objektet, som kommer till oss, och om vi skulle skriva det för hand skulle det se ut så som visas nedan. Observera att det förväntade värdet för egenskapen payload är ett argument, så vi kommer att skicka in ett objekt här (mer om det senare):

jsx{
  type: 'products/productUpdated',
  payload: {id, name, desc, price, amount}
}

Efter att ha klarlagt huvudpunkterna kan vi nu skriva koden för productUpdated inom klammerparenteserna. Först hämtar vi den ändrade datan från action-objektet:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
},

Nu hittar vi produkten som behöver ändras via det mottagna id:et:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
},

Om en sådan produkt hittades i store:n, ersätter vi dess data med de nya värdena:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
  if (desiredProduct) {
    desiredProduct.name = name
    desiredProduct.desc = desc
    desiredProduct.price = price
    desiredProduct.amount = amount
  }
},

Allt som återstår är att exportera action creator för användning i komponenten, som createSlice vänligen skapar åt oss. Låt oss lägga till den till exporten i slutet av filen, tillsammans med den befintliga productAdded:

products/productsSlice.jsexport const { productAdded, productUpdated } = productsSlice.actions