Redux toolkit thunk disappears after getDefaultMiddlware config

Question

My store looks like this:

export default configureStore({
  reducer: {
    sequencer: sequencerReducer,
    editMode: editModeReducer,
    tone: toneReducer,
    app: appReducer,
  },
  middleware: (getDefaultMiddleware) => {
    getDefaultMiddleware({ immutableCheck: false });
  },
});

I had a working thunk, but I need this immutableCheck: false config. Once set it seems to overwrite the default middleware and thunk is no longer working. Here is my thunk:

export const modCell = (step, noteOn) => (dispatch, getState) => {
  const selectedSound = getState().editMode.selectedSound;
  dispatch(sequencerSlice.actions.toggleCell({ step, selectedSound }));
};

And here is the error I get:

Error: Actions must be plain objects. Use custom middleware for async actions.

Any ideas?

Answer 1

I see the issue. Your middleware function isn't returning anything. You have curly braces with that middleware arrow function, so it's a function body with no implicit return. You either need to add an explicit return statement, or change it to an implicit return by removing the curly braces. So, you're ending up with no middleware setup at all.

edit

To be clear, what you want is:

export default configureStore({
  reducer: {
    sequencer: sequencerReducer,
    editMode: editModeReducer,
    tone: toneReducer,
    app: appReducer,
  },
  middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware({ immutableCheck: false });
  },
});