Obtención de datos de vendedores en Redux

Iniciemos nuestra aplicación con productos. Vemos que en las tarjetas de productos no se muestran los vendedores. Obtengámoslos del servidor y mostremos estos datos. Para ello tendremos que realizar la secuencia de acciones que ya conocemos.

Para empezar, abramos el archivo server.js. Encontremos el array handlers y agreguemos otro manejador para la solicitud GET (después del manejador GET para productos). Como ven, es prácticamente idéntico:

http.get('/fakeServer/sellers', async () => {
	await delay(ARTIFICIAL_DELAY_MS)
	return HttpResponse.json(db.seller.getAll())
}),

Hemos manejado la solicitud en el servidor. La siguiente etapa es que en el archivo sellersSlice.js debemos escribir un thunk para obtener datos del servidor. Para ello importemos en él client y createAsyncThunk:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

Ahora obtendremos los vendedores del servidor, así que los quitaremos de initialState, dejando simplemente corchetes vacíos:

const initialState = []

Y luego, antes de la función sellersSlice creemos nuestro thunk fetchSellers. Al cliente le pasaremos la ruta especificada por nosotros en el servidor:

export const fetchSellers = createAsyncThunk(
	'sellers/fetchSellers',
	async () => {
		const response = await client.get('/fakeServer/sellers')
		return response.data
	}
)

Solo nos queda crear un reducer adicional para sellersSlice. Limitémonos aquí a manejar la solicitud exitosa. Todas las acciones generadas por fetchSellers, serán idénticas a las acciones de fetchProducts:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
	extraReducers(builder) {
		builder.addCase(fetchSellers.fulfilled, (state, action) => {
			return action.payload
		})
	},
})

Les recuerdo que la última vez, al obtener los productos, modificamos el valor actual del estado. Aquí hemos utilizado un enfoque ligeramente diferente y simplemente hemos devuelto un nuevo valor, ya que en createSlice también se puede hacer así. De este modo logramos dos objetivos. En primer lugar, obtuvimos los datos, y en segundo lugar, ahora tenemos la garantía de que en la lista de vendedores no aparecerá nada más, ya que hemos reescrito completamente el slice con el valor de action.payload.

Abra su aplicación de estudiantes. Abra en ella el archivo server.js, agregue en el array handlers otro manejador para la solicitud GET de profesores.

Y ahora abra el archivo teachersSlice.js. Convierta initialState en un array vacío, como se muestra en la lección. Antes de la función studentsSlice escriba el thunk fetchTeachers.

En la función createSlice agregue un reducer extra, limitándose a manejar la solicitud exitosa.