Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

389
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!