Блог

В моем приложении react мне нужна возможность закрывать модал в зависимости от состояния компонента.

В первом случае, если состояние не изменено, модал закрывается без второго модала подтверждения.

     closeAllModals(state) {
      return {
        ...state,
        modalsArray: [],
      };
    },
 

Во втором случае, если состояние изменилось
(т. е. выбран раскрывающийся список, текст, введенный в поле и т.д.), Открывается режим подтверждения:

 export const ModalStore = createSlice({
  name: 'modal',
  initialState: {
    modalsArray: [],
    callbackState: { state: ModalCallbackState.UNDEFINED, modalId: '' },
    loaderQueue: [],
    loaderQueueConfig: {},
  } as ModalState,
  reducers: {
    openModal(state, action: PayloadAction<IOpenModal>) {
      const { modalWithCallback, modalDescriptionId } = action.payload;
      return {
        ...state,
        modalsArray: [
          ...state.modalsArray,
          {
            modalDisplayFlex: true,
            ...action.payload,
          },
        ],
        ...(modalWithCallback amp;amp; { callbackState: { state: ModalCallbackState.UNDEFINED, modalId: modalDescriptionId } }),
      };
    },
 

В компоненте второй модальный регистр отображается с помощью этого кода:

    const handleCloseFlow = (): void => {
    if (step === 'hour' || step === 'material' || step === 'class') {
      const idschool = stepInfo.school?.school.idschool;
      if (idschool) {
        const school = getschoolByIdschool(institute, idschool);
        if (school) {
          dispatch(
            openModal({
              modalComponent: 'Alert',
              modalFullscreen: true,
              modalDescriptionId: 'AlertModal',
              modalInfo: {
                modalTitle: t('lessonPlan.title'),
                firstSubTitle: t('lessonPlan.classHours', {
                  classe: t('lessonPlan.classroomName', { name: stepInfo.school?.classe?.descriptionClasse || '' }),
                  totHours: stepInfo.totHours || '',
                }),
                secondSubTitle: `${school.ordineschool?.descriptionOrdineschool} ${school.schoolName}`,
              },
            }),
          );
        }
      }
    } else {
      dispatch(closeAllModals());
    }
  };
 

Второй случай работает, когда вводятся данные. Однако в первом случае модальное значение никогда не закрывается без появления модального значения во втором случае.

Как я могу объединить эти два разных метода закрытия в handleCloseFlow функции?