Parece que desea ejecutar un efecto secundario (enviar un mensaje al servidor) cada vez que se rechaza un thunk. Sugeriría mirar nuestro nuevo "middleware de escucha" para Redux Toolkit , que específicamente le permite activar lógica adicional cuando se envían ciertas acciones.

El middleware de escucha es actualmente un paquete separado @rtk-incubator/action-listener-middleware , ya que hemos estado iterando en su API, pero a partir de hoy la API es estable y planeamos lanzarla oficialmente como parte de RTK 1.8 en breve. Puede usarlo en ese paquete hoy y pasar a importarlo desde RTK tan pronto como salga la versión.

Esto es lo que podría parecer:

 // app/listenerMiddleware.js import { isRejected } from '@reduxjs/toolkit'; import { createListenerMiddleware } from '@rtk-incubator/action-listener-middleware'; const listenerMiddleware = createListenerMiddleware() listenerMiddleware.startListening({ matcher: isRejected, effect: async (action, listenerApi) => { // send a message to the server here containing info from the action }, })

Cree un segmento de estado de error que contenga el error global y use la función de coincidencia isRejected para verificar si una acción es un creador de acción 'rechazado' del ciclo de vida de la promesa createAsyncThunk .

P.ej

 import { configureStore, createAsyncThunk, createSlice, isRejected, isRejectedWithValue } from '@reduxjs/toolkit'; const thunkA = createAsyncThunk('a', async (_, thunkAPI) => { return thunkAPI.rejectWithValue('error a'); }); const thunkB = createAsyncThunk('b', async (_, thunkAPI) => { return Promise.reject('error b'); }); const thunkC = createAsyncThunk('c', async (_, thunkAPI) => { return { name: 'c' }; }); const thunkASlice = createSlice({ name: 'thunkA', initialState: { name: '' }, reducers: {}, extraReducers: (builder) => { builder.addCase(thunkA.fulfilled, (state, action) => { state.name = (action.payload as any).name; }); }, }); const thunkBSlice = createSlice({ name: 'thunkB', initialState: { name: '' }, reducers: {}, extraReducers: (builder) => { builder.addCase(thunkA.fulfilled, (state, action) => { state.name = (action.payload as any).name; }); }, }); const thunkCSlice = createSlice({ name: 'thunkC', initialState: { name: '' }, reducers: {}, extraReducers: (builder) => { builder.addCase(thunkA.fulfilled, (state, action) => { state.name = (action.payload as any).name; }); }, }); const errorSlice = createSlice({ name: 'error', initialState: { message: '', }, reducers: {}, extraReducers: (builder) => { builder.addMatcher(isRejected, (state, action) => { // global error handle reducer state.message = 'some thunk rejected'; }); }, }); const store = configureStore({ reducer: { error: errorSlice.reducer, a: thunkASlice.reducer, b: thunkBSlice.reducer, c: thunkCSlice.reducer, }, }); store.subscribe(() => { console.log('state:', store.getState()); }); // store.dispatch(thunkA()); store.dispatch(thunkB()); store.dispatch(thunkC());

Salida de estado final:

 state: { error: { message: 'some thunk rejected' }, a: { name: '' }, b: { name: '' }, c: { name: '' } }

thunkA y thunkB son acciones 'rechazadas', puede manejar la acción rechazada en el reductor de errorSlice centralizado.