Reducer e action no Redux

Na lição anterior, terminamos o formulário para adicionar um produto e o exibimos na página principal. Mas os dados adicionados ainda não são salvos, ou seja, o novo produto não é adicionado aos existentes na store. Vamos corrigir isso.

Para começar, em nosso aplicativo de produtos abriremos o arquivo productsSlice.jsx e escreveremos na propriedade reducer para createSlice a função productAdded, que será responsável por adicionar o produto na store com base no estado atual e na ação transmitidos a ela. É importante notar que aqui não nos é passado o state inteiro, mas apenas a parte que corresponde aos produtos (o slice products sabe apenas sobre ela). O objeto com o novo produto estará na propriedade payload do objeto action, que será gerado pelo manipulador de eventos ao clicar no botão de salvar no formulário. Como resultado, o reducer productAdded ficará assim no código de createSlice:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

E quanto à action? Logo no início do tutorial mencionamos que uma action é um evento, representado como um objeto, que descreve o que aconteceu no aplicativo. Também falamos sobre como podemos usar uma função action creator, que criará esse objeto para nós, por exemplo, assim:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

A boa notícia é que não precisamos fazer nada, pois a função createSlice fará isso por nós. Assim que escrevemos o reducer, ela criará automaticamente um action creator com o mesmo nome para nós. Só nos resta exportar o action creator obtido para uso posterior nos componentes. Vamos fazer isso no final do arquivo antes de exportar o reducer, assim:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Abra seu aplicativo de estudantes, e então o arquivo studentsSlice.jsx, adicione o valor do campo reducer para createSlice, conforme mostrado na lição.

Adicione ao final do arquivo studentsSlice.jsx a exportação da função action creator obtida.