Редукс модальный (Реакт машинопись - Jhipster)

Question

Во-первых, я хотел бы отметить, что я довольно нубистский в реагирующем-редуксе, и мне будет нужна ваша помощь.

Моя проблема заключается в следующем, я пытаюсь реализовать модал редукса о проекте машинописного реагирования.

Проект основан на платформе Jhipster и использует машинописный текст.

Мое руководство по модалу редуксов взято отсюда: https://medium.com/backticks-tildes/creating-a-modal-component-the-redux-way-cf9f4c5497dd

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

В настоящее время моя ошибка является избыточной. js: 360 Uncaught Error: Редуктор "modal" вернул неопределенное значение во время инициализации. Если состояние, переданное редуктору, не определено, вы должны явно вернуть исходное состояние. Начальное состояние не может быть неопределенным. Если вы не хотите устанавливать значение для этого редуктора, вы можете использовать null вместо undefined.

Спасибо!

modal.ts:

import { REQUEST } from 'app/shared/reducers/action-type.util';

export const ACTION_TYPES = {
  SHOW_MODAL: 'modal/SHOW_MODAL',
  HIDE_MODAL: 'modal/HIDE_MODAL'
};

const initialState = {
  modalType: null,
  modalProps: {
    open: false
  }
};

export type ModalState = Readonly<typeof initialState>;

// Reducer

export default (state: ModalState, action): ModalState => {
  switch (action.type) {
    case REQUEST(ACTION_TYPES.SHOW_MODAL):
      return {
        ...state,
        modalType: action.modalType,
        modalProps: action.modalProps
      };
    case REQUEST(ACTION_TYPES.HIDE_MODAL):
      return {
        ...initialState
      };
    default:
      return state;
  }
};

// Actions
export const showModal = ( modalProps, modalType ) => dispatch => {
  dispatch({
    type: ACTION_TYPES.SHOW_MODAL,
    modalProps,
    modalType
  })
};

export const hideModal = () => dispatch => {
  dispatch({
    type: ACTION_TYPES.HIDE_MODAL
  })
};

IRootState :

...
import modal, { ModalState } from 'app/shared/reducers/modal';


export interface IRootState {
...
  readonly modal: ModalState;
...
}

const rootReducer = combineReducers<IRootState>({
...
  modal,
...
});

export default rootReducer;

modal- root:

import React from 'react'
import { connect } from 'react-redux'
import {Modal} from 'reactstrap';

import { default as modalTypes } from './modals/index';
import { IRootState } from 'app/shared/reducers';
import { hideModal } from 'app/shared/reducers/modal';

const MODAL_TYPES = {
  'confirm': modalTypes.ConfirmInstallModal,
};


export interface IModalContainer extends StateProps, DispatchProps {}

class ModalContainer extends React.Component<IModalContainer> {
  constructor(props) {
    super(props);
    this.closeModal = this.closeModal.bind(this)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.modalProps.open !== this.props.modalIsOpen) {
      this.setState({
        modalIsOpen: nextProps.modalProps.open
      })
    }
  }

  closeModal() {
    this.props.hideModal()
  }

  render() {
    if (!this.props.modalType) {
      return null
    }
    const SpecifiedModal = MODAL_TYPES[this.props.modalType];
    return (
      <div>
        <Modal
          isOpen={this.props.modalIsOpen}
        >
          <SpecifiedModal
            closeModal={this.closeModal}
            {...this.props.modalProps}
          />
        </Modal>
      </div>
    )
  }
}
const mapStateToProps = ({ modal }: IRootState) => ({
  modalType: modal.modalType,
  modalProps: modal.modalProps,
  modalIsOpen: modal.modalProps.open
});
const mapDispatchToProps = { hideModal };
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(mapStateToProps, mapDispatchToProps)(ModalContainer)

drag-and-drop:

import React, { useEffect } from 'react';
import { connect } from 'react-redux';

import { toast } from 'react-toastify';
import DropZone from 'app/modules/home/drag-and-drop/drop-zone/drop-zone';
import { reset, uploadFile } from 'app/modules/home/drag-and-drop/drag-and-drop.reducer';
import { IRootState } from 'app/shared/reducers';
import { convertBytesToMB } from 'app/shared/util/utils';
import ModalContainer from 'app/shared/layout/modal/modal-root';
import { hideModal, showModal } from 'app/shared/reducers/modal';

export interface IDragAndDropProps extends StateProps, DispatchProps {}

export const DragAndDrop = (props: IDragAndDropProps) => {

  const handleFileUpload = file => props.uploadFile(file);
  const handleReset = () => props.reset();

  const handleDropAccepted = acceptedFiles => {
    const singleFile = acceptedFiles[0];
    handleFileUpload(singleFile);
  };
  const openConfirmModal = () => {
    showModal({
      open: true,
      closeModal: this.closeModal,
      title: 'Confirm Modal',
      message: "MESSAGE"
    }, 'confirm');
  };

  useEffect(() => {
    if (props.updateSuccess) {
      openConfirmModal();
    }
  });


  return (
    <div>
      <DropZone
        onDropAccepted={handleDropAccepted}
      />
      <ModalContainer />
    </div>
  );
};

const mapStateToProps = ({ dragAndDrop }: IRootState) => ({
  loading: dragAndDrop.loading,
  errorMessage: dragAndDrop.errorMessage,
  updateFailure: dragAndDrop.updateFailure,
  updateSuccess: dragAndDrop.updateSuccess,
});

const mapDispatchToProps = { uploadFile, reset, showModal, hideModal };
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DragAndDrop);