How to hide animated modal via Redux?

Question

React

Can you please tell me how to hide an animated modal window through Redux without using setTimeot?
How to dispatch an action only after the animation completes after 400ms?
I will be very grateful for your help

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