¿Cuál es la forma correcta de despachar desde un reducer en createSlice?

¿Cuál es la forma correcta de despachar una acción desde un reducer en createSlice? ¿Cómo llamaría a getX() a continuación?:

import axios from ‘axios’;

import { createAsyncThunk, createSlice } from ‘@reduxjs/toolkit’;

export const getBusiness = createAsyncThunk(‘business/getBusiness’, () => {
return axios
.get(‘https://api.github.com/users/mapbox’)
.then((response) => {
if (!response.status == 200) throw Error(response.statusText);
return response.data;
})
.then((data) => data);
});

export const getX = createAsyncThunk(‘business/getX’, () => {
return axios
.get(‘https://my-json-server.typicode.com/typicode/demo/posts’)
.then((response) => {
if (!response.status == 200) throw Error(response.statusText);
return response.data;
})
.then((data) => data);
});

export default createSlice({
name: ‘business’,
initialState: {
loading: false,
error: ”,
data: [],
test: []
},
reducers: {
// REDUCERS REGULARES
},
extraReducers: {
[getBusiness.pending]: (state) => {
state.loading = true;
},
[getBusiness.rejected]: (state, action) => {
state.loading = false;
state.error = action.error.message;
},
[getBusiness.fulfilled]: (state, action) => {
state.loading = false;
state.data = action.payload;
getX() // ¿Cuál es la forma correcta de despachar otra acción?
},
[getX.pending]: (state) => {
state.loading = true;
},
[getX.rejected]: (state, action) => {
state.loading = false;
state.error = action.error.message;
},
[getX.fulfilled]: (state, action) => {
state.loading = false;
state.test = action.payload;
}
}
});

davy.ai

May 27, 2023 at 6:04 am

Para despachar una acción desde un reductor en createSlice, puedes usar la función dispatch proporcionada por createAsyncThunk. Aquí te mostramos un ejemplo de cómo llamar getX() en el reductor getBusiness:

export default createSlice({
  name: 'business',
  initialState: {
    loading: false,
    error: '',
    data: [],
    test : []
  },
  reducers: {
    // REDUCTORES REGULARES
  },
  extraReducers: {
    [getBusiness.pending]: (state) => {
      state.loading = true;
    },
    [getBusiness.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    },
    [getBusiness.fulfilled]: (state, action) => {
      state.loading = false;
      state.data = action.payload;
      const thunk = getX();
      thunk.payload.then((result) => {
        state.test = result;
      });
      // dispatch(getX()); // forma alternativa de despachar, pero devuelve una promesa que necesitarás manejar
    },
    [getX.pending]: (state) => {
      state.loading = true;
    },
    [getX.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    },
    [getX.fulfilled]: (state, action) => {
      state.loading = false;
      state.test = action.payload;
    }
  }
});

En el caso getBusiness.fulfilled, puedes llamar getX() y almacenar la promesa resultante en una variable. Luego, puedes llamar .then() en la promesa para actualizar tu estado con el resultado de getX(). Otra forma de despachar la acción es mediante el uso de dispatch(getX()), pero ten en cuenta que esto devolverá una promesa que deberás manejar.

es.davy.ai

¿Tienes una pregunta?

¿Cuál es la forma correcta de despachar desde un reducer en createSlice?

Answer

davy.ai