es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Es posible crear una slice en redux-toolkit utilizando solo extraReducers y un objeto reducers vacío?

¿Es posible crear una slice en redux-toolkit utilizando solo extraReducers y un objeto reducers vacío?

30 May, 2023 Programación

Tengo el siguiente código:

export const walkSlice = createSlice({
name: "walk"
, initialState
, reducers: {}
,extraReducers: (builder) => {
builder
// Cambia el estado a "cargando" cuando se está haciendo una llamada a la API
.addCase(fetchWalk.pending, (state) => {
state.status = cStatusType.Loading;
})
...

Cuando los reducers están configurados como un objeto vacío, el slice no parece aparecer en el estado de Redux. Solo quiero usar extraReducers para manejar las llamadas a la API. He probado agregando un reducer vacío, p. ej.

reducers: {
    add: (state) => {

<pre><code>},
</code></pre>

<p>...

Esto parece agregar el slice al estado. ¿Hay alguna forma de evitar esto? No quiero código innecesario si es posible.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una manera de evitar esto. Al definir una sección utilizando createSlice, es posible omitir por completo el campo reducers si no necesita ningún reductor personalizado para esa sección. En este caso, simplemente puede definir el campo extraReducers para manejar todas las llamadas API necesarias. Por ejemplo:

    export const walkSlice = createSlice({
  name: "walk",
  initialState,
  extraReducers: (builder) => {
    builder
      // Cambiar el estado a "cargando" cuando la llamada API esté pendiente
      .addCase(fetchWalk.pending, (state) => {
        state.status = cStatusType.Loading;
      })
      // Manejar el éxito de la llamada API
      .addCase(fetchWalk.fulfilled, (state, action) => {
        state.data = action.payload;
        state.status = cStatusType.Success;
      })
      // Manejar el fracaso de la llamada API
      .addCase(fetchWalk.rejected, (state) => {
        state.status = cStatusType.Failure;
      });
  },
});

    En este ejemplo, solo tenemos los campos nombre, initialState y extraReducers definidos. Esta sección aún se agregará al estado Redux y se puede acceder utilizando getState ().Walk (asumiendo que Walk es el nombre de la sección).

Comments are closed.