How does one have multiple cases that run the same code with Redux Toolkit?

Question

I'm working on converting some older Redux code to use the new Redux Toolkit. I've run into a problem where, in the old code, multiple case statements would trigger the same reducer logic. How does one do this with the new case reducer functions?

In the old code, REGISTER_FAIL, AUHT_ERROR, LOGIN_FAIL, LOGOUT all run the same code. Is it possible to have this same type scenario in the createSlice reducers object?

Old Code

    case REGISTER_FAIL:
    case AUTH_ERROR:
    case LOGIN_FAIL:
    case LOGOUT:
      localStorage.removeItem('token');
      return {
        ...state,
        token: null,
        isAuthenticated: false,
        loading: false,
        user: null,
      };
    default:
      return state;

New Code

const authUserSlice = createSlice({
  name: 'authUser',
  initialState,
  reducers: {
    registerFail(state, action) {
      return {
        ...state,
        token: null,
        isAuthenticated: false,
        loading: false,
        user: null,
      };
    },
    registerSuccess
  },
});

Answer 1

There's a couple different options.

First, you could write the case reducer functions separately, then pass them to createSlice multiple times to generate corresponding actions for each field name:

function resetState() {
  Object.assign(state, {
    token: null,
    // etc
  });
}

const authUserSlice = createSlice({
  name: 'authUser',
  initialState,
  reducers: {
    registerFailed: resetState,
    logout: resetState,
    // etc
  }
});

The other option is to use the extraReducers field, and use builder.addMatcher() to handle multiple cases with the same reducer:

const authUserSlice = createSlice({
  name: 'authUser',
  initialState,
  reducers: {
    // omit
  },
  extraReducers: builder => {
    builder.addMatcher(
      // can pass multiple RTK action creators here
      isAnyOf(registerFailed, loginFailed),
      (state, action) => {
        // reset state here
      }
    )

  }
});

If you're still interoping with old code and have old-style action constants like const LOGIN_FAILED = "LOGIN_FAILED" and need to match those, you can write your own "matching" function that just does a string type comparison, like:

builder.addMatcher(
  (action) => [LOGIN_FAILED, REGISTER_FAILED].includes(action.type),
  (state, action) => {}
)