Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

390
Visualizações
Redux toolkit thunk action generic error handler

I'm enjoying redux-toolkit, but I'm wondering if there is a way to add a generic error handler for any rejected thunk? Just like the browser has the unhandledrejection event you can listen to, I'd like to report any rejected promises to my error tracker.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

It sounds like you want to run a side effect (sending a message to the server) every time a thunk is rejected. I would suggest looking at our new "listener middleware" for Redux Toolkit, which specifically lets you trigger additional logic when certain actions are dispatched.

The listener middleware is currently a separate @rtk-incubator/action-listener-middleware package as we've been iterating on its API, but as of today the API is stable and we plan to officially release it as part of RTK 1.8 shortly. You can use it in that package today, and switch to importing it from RTK as soon as that release comes out.

Here's what it might look like:

// 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
  },
})
about 4 years ago · Juan Pablo Isaza Relatório

0

Create an error state slice hold the global error and use isRejected matching function to check whether an action is a 'rejected' action creator from the createAsyncThunk promise lifecycle.

E.g.

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());

Final state output:

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

thunkA and thunkB are 'rejected' actions, you can handle the rejected action in the errorSlice reducer centralized.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda