Estoy disfrutando de redux-toolkit, pero me pregunto si hay una manera de agregar un controlador de error genérico para cualquier procesador rechazado. Al igual que el navegador tiene el evento de rechazo no controlado que puede escuchar, me gustaría informar cualquier promesa rechazada a mi rastreador de errores.
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.