Preparação de dados para o objeto action no Redux

Recentemente, conversamos sobre o fato de que a função createSlice espera um argumento ao criar o action.payload. Por um lado, isso simplifica seu uso, por outro, pode exigir etapas adicionais para preparar o conteúdo do objeto action.

Vamos abrir nosso aplicativo de produtos e, nele, o arquivo NewProductForm.jsx. Preste atenção na seguinte linha de código:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Aqui, estamos montando o objeto payload diretamente no componente React e passando-o para a action productAdded. E se precisarmos despachar a mesma action a partir de vários componentes ou se a lógica para montá-lo for complexa? Idealmente, nosso componente não deveria se importar com a aparência do objeto em payload para esta action. Além disso, não estamos satisfeitos com a duplicação constante de código.

Esses problemas podem ser resolvidos novamente pelo nosso famoso createSlice, pois, ao escrever um redutor, ele nos permite usar uma função de callback prepare, na qual podemos escrever várias lógicas, gerar números aleatórios e muito mais. Nesse caso, o valor para o campo do redutor pode ser representado como o seguinte objeto:

{reducer, prepare}

Vamos abrir nosso arquivo productsSlice.js e alterar o código para o redutor productAdded. Agora, este trecho de código:

productAdded(state, action) {
	state.push(action.payload)
},

Vamos alterar para o seguinte, no qual a função reducer será responsável por atualizar o estado na store, e prepare - retornará o objeto payload com o id gerado e nossos outros dados:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Como agora vamos gerar o id aqui, e não no componente, vamos adicionar o nanoid na importação:

import { createSlice, nanoid } from '@reduxjs/toolkit'

Por fim, vamos fazer as alterações no NewProductForm.jsx. Em vez da linha:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Teremos esta, na qual simplesmente passamos os dados necessários separados por vírgula (não se esqueça de remover o nanoid da importação neste arquivo):

dispatch(productAdded(name, desc, price, amount))

Vamos iniciar o aplicativo, depois criar um novo produto e verificar que não quebramos nada.

Abra seu aplicativo de estudantes. No arquivo StudentsSlice.js reescreva seu redutor studentAdded de forma que ele seja um objeto {reducer, prepare}, conforme mostrado na lição.

Faça as alterações correspondentes no arquivo NewStudentForm.jsx, conforme mostrado na lição. Inicie o aplicativo e verifique que tudo funciona como antes.