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:

reducers: {
	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):

{
	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:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

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

productUpdated(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:

productUpdated(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:

export const { productAdded, productUpdated } = productsSlice.actions

Abra seu aplicativo de estudantes. Após estudar o material da lição, no arquivo studentsSlice.js escreva outro reducer para a productsSlice, que atualizará os dados do estudante na store caso sejam alterados pelo usuário. Chame-o de studentUpdated.

E como ficaria, neste caso, o seu objeto action? Envie seu código na resposta.

No final do arquivo, exporte o action creator studentUpdated obtido.