Enviando actions e o hook useDispatch no Redux

Implementamos praticamente todos os componentes necessários para o funcionamento de uma aplicação Redux. Agora só precisamos entender como enviar uma action a partir de um componente React. Vamos lá.

Abra nossa aplicação de produtos. No formulário do componente NewProductForm temos um botão para salvar os dados do novo produto. Vamos adicionar um manipulador de clique a ele. Quando clicarmos nele, o manipulador onSaveProductClick será acionado:

<button type="button" onClick={onSaveProductClick}>
	salvar
</button>

Ao criar um novo produto, precisaremos de um novo id para ele. Vamos gerá-lo usando a conhecida biblioteca nanoid. A propósito, não é necessário instalá-la, pois já vem incluída no pacote RTK. Vamos adicionar o nanoid na importação:

import { nanoid } from '@reduxjs/toolkit'

Também lembramos que a única maneira de alterar o state é chamar o método dispatch, que está disponível na store, e passar um objeto action. Para acessar esse método, usaremos o hook do React-Redux useDispatch. Vamos importá-lo:

import { useDispatch } from 'react-redux'

No código da função NewProductForm, vamos criar uma constante para ele, dispatch, logo após criarmos as constantes para nossos states locais:

const dispatch = useDispatch()

Também precisamos importar o action creator productAdded que obtivemos na lição anterior:

import { productAdded } from './productsSlice'

Agora podemos escrever a própria função manipuladora onSaveProductClick. Vamos fazer isso antes do comando return:

const onSaveProductClick = () => {}

Dentro da função, chamamos dispatch, formamos o objeto action, onde a propriedade payload receberá o id gerado, o nome, a descrição, o preço e a quantidade do produto. Retiramos todos esses dados dos states locais. Ao mesmo tempo, no início, verificamos em uma condição se todos os campos estão preenchidos - somente neste caso chamamos o dispatch. No final do código da função, retornamos os states locais ao estado original:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

Agora vamos iniciar nossa aplicação, inserir dados nos campos do formulário e clicar no botão de salvar. Uhuul, um novo produto apareceu na parte inferior da página. Abrindo o Redux DevTools, e nele a aba Inspector, vemos que à esquerda, além de @@INIT, também aparece nossa action products/productAdded. E na parte direita podemos clicar nas abas Action e State, alternando entre @@INIT e products/productAdded. Agora vemos que nosso novo produto é adicionado. Também na aba Action vemos a action gerada automaticamente usando createSlice (clique, por exemplo, em Raw). Uhuul: não precisamos digitá-la manualmente.

Abra sua aplicação de estudantes, e então o arquivo NewStudentForm.jsx, adicione ao botão de salvar um manipulador de clique.

Escreva todas as importações necessárias e escreva a função manipuladora onSaveStudentClick, aplicando o método dispatch como mostrado na lição.

Inicie a aplicação, insira dados nos campos do formulário e clique no botão de salvar. Certifique-se de que um novo estudante foi adicionado na parte inferior da página.

Abra o Redux DevTools e navegue pelas abas Action e State, certifique-se de que o novo objeto de estudante é adicionado. Veja o objeto action que foi gerado para você e envie-o na resposta a esta tarefa.