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:

api/server.jshttp.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:

sellers/sellersSlice.jsimport { 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:

sellers/sellersSlice.jsconst 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:

sellers/sellersSlice.jsexport 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:

sellers/sellersSlice.jsconst 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.