Alterando a Estrutura do Estado no Redux

A primeira etapa que vamos implementar para a interação da nossa aplicação Redux com um servidor externo - é obter os dados armazenados nele ao iniciar a aplicação. Mas antes, vamos fazer algumas alterações na nossa aplicação.

Vamos abrir nossa aplicação de produtos, e nela o arquivo productsSlice.js. Prestem atenção na definição de initialState. Inicialmente, nosso slice de produtos productsSlice - é um array contendo objetos (no nosso caso, dois) com dados dos produtos. Primeiro, como agora vamos carregá-los do servidor, precisamos removê-los do initialState. Segundo, vamos enviar requisições API para o servidor e será importante sabermos seu status. Considerando essas duas coisas, vamos refazer o initialState. Que agora seja simplesmente um objeto com os campos products (inicialmente não haverá dados aqui, apenas um array vazio), status e error. Agora nosso código para initialState ficará um pouco mais curto:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Por enquanto, definimos o status como 'idle' (inatividade), pois inicialmente não enviamos nenhuma requisição, mas no geral ele mudará e poderá assumir valores como 'loading', 'succeeded', 'failed'. Lembrem-se que para denotar o status, vocês podem escolher os nomes que forem mais convenientes para vocês.

Descendo mais no código. Após a alteração do initialState, devemos alterar também o código onde trabalhamos com esse estado nas funções redutoras. Vejamos o código para productAdded:

state.push(action.payload)

Agora, os novos produtos vamos adicionar não simplesmente ao state dos produtos, mas à sua propriedade state.products. Portanto, substituiremos a linha acima por:

state.products.push(action.payload)

Consequentemente, faremos as mesmas alterações para o redutor reactionClicked. Em vez de:

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

Agora será:

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

Substituam vocês mesmos state por state.products no código do redutor productUpdated.

Abra sua aplicação de estudantes. Abra nela o arquivo studentsSlice.js. Que agora seu initialState tenha três propriedades: students, status, error - refaça-o, como mostrado na lição.

Faça as alterações correspondentes no código abaixo. Substitua state por state.students no código das suas três funções redutoras.