Adicionando um redutor a uma aplicação Redux

Na lição anterior, criamos o componente UserReaction para que cada produto também tivesse reações dos usuários. Agora precisamos escrever um redutor que processará o contador de reações quando o usuário clicar no botão de uma reação específica.

Vamos abrir nossa aplicação de produtos e nela o arquivo productsSlice.js com todos os redutores. Agora, na propriedade reducers vamos criar outro redutor reactionClicked (podemos colocá-lo primeiro - antes de productAdded, embora isso não faça diferença). Como de costume, passaremos a ele os parâmetros state e action:

reactionClicked(state, action) {},

E agora, dentro das chaves que deixamos vazias na etapa anterior, vamos escrever o código para ele. Primeiro, vamos extrair o id do produto do payload do objeto action e o nome da reação:

const { productId, reaction } = action.payload

Em seguida, obteremos o produto necessário do estado passado:

const currentProduct = state.find(product => product.id === productId)

E se o produto existir, incrementaremos o valor da reação passada em 1:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

Pronto, nosso código para reactionClicked está finalizado:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Vamos, no final do arquivo, adicionar a exportação do action creator obtido:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

É importante notar dois pontos cruciais aqui. Como você se lembra das lições anteriores - atualizar diretamente o valor no código do redutor assim não é permitido (olhe para esta linha: reactions[reaction]++), mas isso é aceitável para nós porque estamos fazendo dentro do createSlice, que usa a biblioteca Immer. Ela cuidará de transformar nosso código em uma atualização "segura" do valor. Isso nos permite escrever coisas complexas de uma maneira mais simples.

Em seguida, é necessário lembrar - o objeto action deve conter a quantidade mínima possível de informações - apenas o suficiente para indicar o que aconteceu. Não faça nele quaisquer cálculos. Todos os cálculos para atualizar o estado devem ser feitos no redutor, aqui você pode escrever toda a lógica necessária para isso.

Abra sua aplicação de estudantes e no arquivo studentsSlice.js adicione mais um redutor voteClicked no campo reducers, conforme mostrado na lição. Escreva o código para ele. A tarefa do seu redutor - ao clicar, incrementar o valor vote (ou voto), no qual foi clicado, para o estudante em questão, em 1.

No final do arquivo, não se esqueça de exportar o action creator voteClicked obtido.