如何使用 Immer 从减速器返回初始状态？

Question

I am working on a React project and using Redux for state management. I'm moving from ImmutableJS to Immer, and I'm not sure how to return the initial state with some changes. I was using merge from ImmutableJS, but not sure how to do it with Immer.

I looked everywhere and couldn't find the answer. It seems like setting draft to initial state, and then making some changes doesn't work.

export const initialState = {
  initializedAuth: false,
  isAuthenticated: false,
  user: null,
};

const authProviderReducer = (state = initialState, action) =>
  produce(state, draft => {
    switch (action.type) {
      case AUTH_USER_NO_TOKEN:
        draft.initializedAuth = true;
        draft.isAuthenticated = false;
        break;

      case AUTH_UPDATE_USER_HAVE_TOKEN:
        draft.initializedAuth = true;
        draft.isAuthenticated = true;
        break;

      case AUTH_SUCCESSFUL_LOGIN:
        draft.initializedAuth = true;
        draft.isAuthenticated = true;
        draft.user = action.payload;
        delete draft.user.session;
        break;

      case AUTH_LOGOUT: {
        // return initialState;
        // draft = initialState; doesn't work
      }
    }
  });

On AUTH_LOGOUT , I want to return the initial state and set its initializedAuth property to true.

Using Immutablejs, I was able to do it like this:

case AUTH_LOGOUT: {
    return initialState.set('initializedAuth', true);
}

Answer 1

It looks like you are following the correct pattern, except that your reducer's AUTH_LOGOUT case should work as follow:

case AUTH_LOGOUT: {
    return draft[initializedAuth] = true;
}

About returning the intialState, there is this section in the docs:

If you want to initialize an uninitialized state using this construction, you can do so by passing the initial state as second argument to produce:

const byId = produce(
    (draft, action) => {
        switch (action.type) {
            .
            .
            .
        }
    },
    intialState <-- here
)

Answer 2

Reset draft to initialState and set initializedAuth .

case AUTH_LOGOUT: {
  draft = initialState;         // reset to initialState
  draft.initializedAuth = true; // set to true

  break;
}

Answer 3

const appReducer = (state = initialState, action) =>
produce(state, draft => {
    switch (action.type) {
        case LOGOUT:
            return initialState;