Alteração de dados do produto no Redux store

Aprendemos a adicionar produtos, mas e se quisermos alterar as informações de um produto? Vamos ver como fazer isso nesta e nas próximas lições.

Vamos abrir nosso aplicativo de produtos e entrar no arquivo productsSlice.js. Começaremos precisando escrever outro reducer para a slice products que será executado quando um produto for atualizado. Vamos chamá-lo de productUpdated e adicioná-lo ao campo reducers após o reducer productAdded. Também vamos passar imediatamente os parâmetros state e action para ele, com base nos quais, como lembramos, o reducer funciona:

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

Agora vamos pensar em quais dados precisaremos para atualizar um produto. Antes de tudo - é o id, através dele poderemos encontrar o produto desejado na store. Os demais dados - nome, descrição, preço e quantidade serão fornecidos para alteração. Todos esses valores obteremos da propriedade payload do objeto action, que nos chegará, e, se estivéssemos escrevendo ele manualmente, ele ficaria assim, como mostrado abaixo. Observe que o valor esperado da propriedade payload é um único argumento, portanto vamos passar um objeto para aqui (falaremos sobre isso no futuro):

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

Tendo esclarecido os pontos principais, agora podemos escrever o código para productUpdated entre as chaves. Primeiro, vamos obter os dados alterados do objeto action:

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

Agora vamos encontrar o produto que precisa ser alterado pelo id obtido:

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

Se tal produto for encontrado na store, substituiremos seus dados pelos novos valores:

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
  }
},

Resta-nos apenas exportar o action creator para uso no componente, que o createSlice gentilmente criará para nós. Vamos adicioná-lo à exportação no final do arquivo, juntamente com o productAdded existente:

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