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:

products/productsSlice.jsconst 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:

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

products/productsSlice.jsexport const { productAdded } = productsSlice.actions
export default productsSlice.reducer