Восстановление контекста реагирования до его состояния по умолчанию

Question

У меня есть состояние по умолчанию для React Context следующим образом:

export const defaultState: UsersState = {
  isModalOpen: false,
  isCancelRequest: false,
  companyId: 0,
  users: []
};

Когда модал, с которым он работает, отменяется, я хочу очистить состояние до значения по умолчанию. Это работает:

    case RESET_STATE: {
      return {
        ...state,
        isModalOpen: false,
        isCancelRequest: false,
        companyId: 0,
        users: []
      };
    }

Но это не так:

    case RESET_STATE: {
      return {
        state: defaultState
      };
    }

Когда контекст создается впервые, пользователи выглядят так:

users: Array[0]

Нокогда я использую последний, упрощенный подход к сбросу состояния, это выглядит так:

users: Array  (empty)

По крайней мере, это то, что я вижу в React DevTools.

Почему настройкаstate до defaultState не восстановить users до Array[0]?

Answer 1

Это

case RESET_STATE: {
      return {
        state: defaultState
      };
    }

должно быть:

case RESET_STATE: {
      return {
       ...defaultState
      };
    }

В вашем контексте нет объекта с именем state

Answer 2

используйте defaultState вместо {state: defaultState}

, как это.

    case RESET_STATE: {
      return defaultState;
    }

Учебное пособие

const state = {
    isModalOpen: true,
    isCancelRequest: true,
    companyId: 123,
    users: ['1','2','3']
};

const defaultState: UsersState = {
  isModalOpen: false,
  isCancelRequest: false,
  companyId: 0,
  users: []
};

const getState1 = () => {
  return {
    ...state,
    isModalOpen: false,
    isCancelRequest: false,
    companyId: 0,
    users: []
  };
}

const getState2 = () => {
  return {
    state: defaultState
  };
}

const getState3 = () => {
  return defaultState;
}

console.log('this is goal state: ', getState1());
console.log('this is your state: ', getState2());
console.log('this is my state: ', getState3());