Error: builder.addCase cannot be called with an empty action type

[foobarnes]

Hey team!

First off, thanks to all of the contributors for this badass package. It's made my life, personally, much easier.

Release v1.9.6 includes a breaking change for downstream packages that rely on redux-toolkit. This line in the v1.9.6 changelog breaks our usage of next-redux-wrapper:

The builder.addCase method now throws an error if a type string is empty.

I could be wrong, but this feels like a breaking change that shouldn't be included in a minor version update.

store/user-profile/slice.js

import { createSlice } from '@reduxjs/toolkit';
import { HYDRATE } from 'next-redux-wrapper';

export const userProfileSlice = createSlice({
  name: 'userProfile',
  initialState: {
    profile: null,
    profileImage: null,
    memberships: [],
  },
  reducers: {
    setUserProfile(state, action) {
      state.profile = action.payload;
    },
    setUserProfileImage(state, action) {
      state.profileImage = action.payload;
    },
    setUserMemberships(state, action) {
      state.memberships = action.payload;
    },
    resetUserProfile(state) {
      state.profile = null;
      state.profileImage = null;
      state.memberships = [];
    },
  },
  extraReducers: (builder) => {
    builder.addCase([HYDRATE], (state, action) => {
      return {
        ...state,
        ...action.payload.userProfile,
      };
    });
  },
});

export const getUserProfile = (state) => state.userProfile.profile;
export const getUserProfileImage = (state) => state.userProfile.profileImage;
export const getIsAdmin = (state) =>
  state.userProfile.profile?.isAdmin || false;
export const getMemberships = (state) => state.userProfile.memberships;

export const {
  setUserProfile,
  setUserProfileImage,
  setUserMemberships,
  resetUserProfile,
} = userProfileSlice.actions;

export default userProfileSlice.reducer;

store/index.js

import { configureStore } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';

import authReducer from './auth/slice';
import creatorReducer from './creator/slice';
import dataspacesReducer from './dataspaces/slice';
import uiReducer from './ui/slice';
import userProfileReducer from './user-profile/slice';

import { selectedCreatorMiddleware } from './middleware';

export const makeStore = () =>
  configureStore({
    reducer: {
      auth: authReducer,
      userProfile: userProfileReducer,
      creator: creatorReducer,
      ui: uiReducer,
      dataspaces: dataspacesReducer,
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().concat(selectedCreatorMiddleware),
  });

export const wrapper = createWrapper(makeStore);

This is mostly an FYI for anyone else search for this error "Error: builder.addCase cannot be called with an empty action type", since googling returned nothing useful.

[phryneas]

Is next-redux-wrapper using a symbol type here, not a string?

[phryneas]

Huh, looking at the code that just surfaces an older bug:
https://github.com/chawes13/redux-toolkit/blob/5c82a28eddaed7a69f4d47dfc9c70edf307e0788/packages/toolkit/src/mapBuilders.ts#L159-L161

This would always have returned undefined in the past, so adding two case reducers with a symbol type would overwrite each other. 🤦

[EskiMojo14]

you seem to be calling addCase with an array? if you pass HYDRATE without the square brackets it should work correctly

[phryneas]

Huh, right, I was on the wrong track.
Yeah, your code would never have done anything in the past with that array.

[foobarnes]

you seem to be calling addCase with an array? if you pass HYDRATE without the square brackets it should work correctly

@EskiMojo14 Thanks!

I did spot that point to dig into further. I was unclear why next-redux-wrapper used that syntax, but followed their docs blindly just in case. I'll try it!

[phryneas]

They use the outdated object notation in their docs, and in that you would have to use a variable in a key using the [] notation - but there it's not an array.

const foo = "bar";
const obj = {
  [foo]: 1
}

ends up as { bar: 1 }, so [foo] in an object definition is replaced by the value of the variable foo - in this case bar.