Cambio de la estructura del estado en Redux
La primera etapa que implementaremos para la interacción de nuestra aplicación Redux con algún servidor externo es la obtención de datos almacenados en él al iniciar la aplicación. Pero antes, introduzcamos algunos cambios en nuestra aplicación.
Abramos nuestra aplicación de productos, y en ella
el archivo productsSlice.js. Presten atención a la
definición de initialState. Inicialmente, nuestro segmento (slice) de
productos productsSlice es un array que
contiene objetos (en nuestro caso hay dos) con datos
de productos. En primer lugar, dado que ahora vamos a
cargarlos desde el servidor, necesitamos eliminarlos del
initialState. En segundo lugar, enviaremos
solicitudes API al servidor y será importante conocer su
estado. Teniendo en cuenta estas dos cosas,
reorganicemos initialState. Que ahora sea
simplemente un objeto con los campos products
(inicialmente no habrá datos aquí, solo
un array vacío), status y error.
Ahora nuestro código para initialState será
un poco más corto:
const initialState = {
products: [],
status: 'idle',
error: null,
}
Por ahora hemos establecido el estado 'idle' (inactivo),
ya que inicialmente no enviamos ninguna
solicitud, pero en general cambiará y puede
tomar valores como 'loading' (cargando), 'succeeded' (éxito),
'failed' (fallo). Recuerden que para denotar el
estado pueden elegir los nombres que
les resulten convenientes.
Bajemos más en el código. Tras cambiar el
initialState, debemos modificar también el código donde
trabajamos con este estado en las funciones reductoras.
Miremos el código para productAdded:
state.push(action.payload)
Ahora los nuevos productos los agregaremos
no simplemente al state de productos, sino a su
propiedad state.products. Por lo tanto,
reemplacemos la línea anterior por:
state.products.push(action.payload)
En consecuencia, realicemos los mismos cambios
para el reductor reactionClicked. En lugar de:
const currentProduct = state.find((product) => product.id === productId)
Ahora será:
const currentProduct = state.products.find((product) => product.id === productId)
Reemplacen ustedes mismos state por state.products
en el código del reductor productUpdated.
Abran su aplicación de estudiantes.
Abran en ella el archivo studentsSlice.js.
Que ahora su initialState tenga
tres propiedades: students, status,
error - reorganicenlo, como se muestra
en la lección.
Introduzcan los cambios correspondientes
más abajo en el código. Reemplacen state por
state.students en el código para sus
tres funciones reductoras.
