Redutores no Redux

Na lição anterior, usamos a função createSlice para criar um slice para os produtos products e um redutor que irá atualizar esse slice, armazenado na store. Lembro mais uma vez que no Redux os dados do estado são alterados por meio de redutores.

É importante lembrar que existem várias restrições impostas aos redutores. Um redutor atualiza o estado com base apenas nos valores recebidos do estado atual e do objeto action, e então decide como alterar o estado e retorna seu novo valor.

Sabemos que, por padrão, objetos e arrays em JavaScript são mutáveis. Também sabemos que não se pode alterar o state diretamente, nesse caso, devemos trabalhar apenas com cópias. Esta regra deve ser seguida pelo redutor também. Mas escrever essa lógica manualmente pode ser uma tarefa bastante tediosa e complexa, e é aqui que a função createSlice vem em nosso auxílio, que usa a biblioteca Immer, transformando seu código 'mutável' em 'imutável'. Assim, pecar e simplificar a vida só é permitido ao usar funções createSlice ou createReducer.

Entre as restrições do redutor também está o uso de lógica assíncrona, cálculo de valores aleatórios e a execução de outros "efeitos colaterais". E agora, tendo conhecido o redutor mais de perto, vamos voltar ao nosso aplicativo de produtos.

Em nosso aplicativo, temos uma store que criamos nas lições anteriores, mas por enquanto não há nada nela. Vamos abrir nosso arquivo store.js e adicionar um pouco de código nele. Primeiro, vamos importar a função redutor para produtos:

import productsReducer from '../parts/products/productsSlice'

Agora, como redutor, podemos especificar a função importada productsReducer:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Com a linha acima, estamos dizendo à nossa store que agora, quando uma action for despachada, todos os dados para o slice state.products serão atualizados pelo redutor productsReducer.

Agora você pode iniciar o aplicativo (observe que o aviso sobre redutor inválido desapareceu do console!), abrir o Redux DevTools no navegador e explorar suas abas. Por exemplo, clicando na aba State na aba Inspector podemos ver nossos dois objetos de produtos, que foram exibidos como o valor inicial do estado quando o aplicativo foi iniciado pela primeira vez. Na aba Log monitor, vemos quais slices o estado global possui - é o slice products, contendo dois objetos. Dê uma olhada também na aba Chart.

Abra seu aplicativo de estudantes e altere o código do arquivo store.js, conforme mostrado na lição.

Inicie seu aplicativo no navegador e explore as abas da extensão Redux DevTools.