Как скрывать анимированое модальное окно через Redux?

Question

[Alexander]

Подскажите пожалуйста, как скрывать анимированое модальное окно через Redux без использования setTimeot?
Как сделать диспатч экшена только после завершения анимации через 400мс?
Буду очень благодарен за помощь

const MODAL_TYPES: any = {
  'login': LoginForm,
  'register': RegisterForm,
  'reset': ResetForm,
}

export const Modal: React.FC = () => {
  const { modalType, modalProps } = useSelector((state: RootState) => state.modals) //refactor selector
  const modalRef = React.useRef(null)
  const dispatch = useDispatch()
  const [isOpen, setIsOpen] = React.useState(modalProps.open)

  React.useEffect(() => {
    setIsOpen(modalProps.open)
  }, [modalProps.open])

  const onClose = () => {
    setIsOpen(false)
    setTimeout(() => {
      dispatch(hideModal())
    }, 400)
  }

  // useOnClickOutside(modalRef, onClose)
  // useHideScrollbar(isOpen)

  if (!modalType) {
    return null
  }

  const SpecifiedModal = MODAL_TYPES[modalType]
  return ReactDOM.createPortal(
    <CSSTransition in={isOpen} unmountOnExit timeout={400} classNames='overlay'>
      <ModalOverlay>
        <StyledModal ref={modalRef}>
          <ModalHeader>
            {modalProps.logo && <Logo height={20} link={false} />}
            {modalProps.title && <ModalTitle>{modalProps.title}</ModalTitle>}
            {modalProps.description && <ModalSubtitle>{modalProps.description}</ModalSubtitle>}
            <Close onClick={onClose} />
          </ModalHeader>
          <SpecifiedModal />
        </StyledModal>
      </ModalOverlay>
    </CSSTransition>,
    document.getElementById('modal-root') as HTMLElement
  )
}

const initialState: ModalState = {
  modalType: null,
  modalProps: {
    open: false,
    title: '',
    description: '',
    logo: false,
  },
}

const modalSlice = createSlice({
  name: 'modal',
  initialState,
  reducers: {
    showModal(state, action: PayloadAction<ModalState>) {
      state.modalType = action.payload.modalType
      state.modalProps = action.payload.modalProps
    },
    hideModal: () => initialState,
  },
})

Answer 1

[Александр]

onExited

Comments

[Alexander]

хорошо что есть такой метод, но увы он не помог(
Ибо модальное окно тоглится через redux и сперва нужно сделать диспатч чтобы изменить modalProps.open а потом уже отследить анимацию через onExited

[Alexander]

Может есть еще какие-нибудь способы?