React - обработка запроса на удаление данных

Подготовка компонента DeleteOwner и маршрута для удаления

Внутри папки Owner создадим новую папку и назовем ее DeleteOwner. Внутри мы собираемся создать новый файл DeleteOwner.js:

Теперь изменим файл DeleteOwner.js с помощью кода базовой настройки:

import React, { Component } from 'react';
import Aux from '../../../hoc/Auxiliary/Auxiliary';

class DeleteOwner extends Component {
    render() { 
        return ( 
            <Aux>
                
            </Aux>
         )
    }
}
 
export default DeleteOwner;

Чтобы включить навигацию к этому компоненту, нам нужно изменить файл App.js:

import DeleteOwner from './Owner/DeleteOwner/DeleteOwner';

<Route path="/deleteOwner/:id" component={DeleteOwner} />

Прямо сейчас, если мы нажмем кнопку «Удалить» в компоненте OwnerList, мы перейдем на страницу DeleteOwner (даже если внутри нее нет содержимого).

Соединение нашего компонента с редьюсером

Прежде всего, нам нужно добавить операторы импорта:

import * as repositoryActions from '../../../store/actions/repositoryActions';
import * as errorHandlerActions from '../../../store/actions/errorHandlerActions';
import { connect } from 'react-redux';

Следующее, что нам нужно сделать, это добавить функцию mapStateToProps прямо под классом:

const mapStateToProps = (state) => {
  return {
     data: state.repository.data,
     showSuccessModal: state.repository.showSuccessModal,
     showErrorModal: state.errorHandler.showErrorModal,
     errorMessage: state.errorHandler.errorMessage
  }
}

Затем добавьте функцию mapDispatchToProps:

const mapDispatchToProps = (dispatch) => {
    return {
        onGetOwnerById: (url, props) => dispatch(repositoryActions.getData(url, props)),
        onDeleteOwner: (url, props) => dispatch(repositoryActions.deleteData(url, props)),
        onCloseSuccessModal: (url, props) => dispatch(repositoryActions.closeSuccessModal(props, url)),
        onCloseErrorModal: () => dispatch(errorHandlerActions.closeErrorModal())
    }
}

Итак, весь этот код достаточно знаком (если вы читали предыдущие части).

Далее, изменим инструкцию export:

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

Реализация JSX в компоненте DeleteOwner

Чтобы создать представление для этого компонента, нам нужно сначала добавить операторы импорта:

import { Well, Button, Col, Row, ControlLabel } from 'react-bootstrap';
import Moment from 'react-moment';

Прямо между блоками render и return нам нужно добавить этот код:

let owner = {...this.props.data};

Внутри тега Aux добавим контент, который мы собираемся отображать на странице:

<Row>
   <Col md={10}>
       <Well>
           <Row>
              <Col md={3}>
                 <ControlLabel htmlFor='name'>Owners name:</ControlLabel>
              </Col>
              <Col md={7}>
                  <span name='name'>{owner.name}</span>
              </Col>
           </Row>
           <Row>
              <Col md={3}>
                  <ControlLabel htmlFor='dateOfBirth'>Date of birth:</ControlLabel>
              </Col>
              <Col md={7}>
                  <span name='dateOfBirth'><Moment format="MM/DD/YYYY">{owner.dateOfBirth}</Moment></span>
              </Col>
           </Row>
           <Row>
              <Col md={3}>
                  <ControlLabel htmlFor='address'>Address:</ControlLabel>
              </Col>
              <Col md={7}>
                  <span name='address'>{owner.address}</span>
              </Col>
            </Row>
       </Well>
    </Col>
</Row>

Ниже тега Row нам нужно отобразить кнопки на странице:

<Row>
   <Col mdOffset={8} md={1}>
       <Button type="submit" bsStyle="info" onClick={this.deleteOwner}>Delete</Button>
   </Col>
   <Col md={1}>
        <Button bsStyle='danger' onClick={this.redirectToOwnerList}>Cancel</Button>
   </Col>
</Row>

Наконец, давайте добавим операторы импорта для модальных компонентов:

import SuccessModal from '../../../components/Modals/SuccessModal/SuccessModal';
import ErrorModal from '../../../components/Modals/ErrorModal/ErrorModal';

Сразу после этого, под тегом Row и прямо над тегом Aux, давайте добавим код для отображения наших модальных компонентов:

<SuccessModal show={this.props.showSuccessModal} modalHeaderText={'Success message'}
      modalBodyText={'Action completed successfylly'}
      okButtonText={'OK'}
      successClick={() => this.props.onCloseSuccessModal('/owner-List', { ...this.props })} />
<ErrorModal show={this.props.showErrorModal} modalHeaderText={'Error message'}
      modalBodyText={this.props.errorMessage}
      okButtonText={'OK'}
      closeModal={() => this.props.onCloseErrorModal()} />

Теперь мы можем проверить результат:

Как видно на скриншоте выше, у нас нет всех данных на странице, но мы собираемся исправить это в ближайшее время.

Реализация бизнес-логики для действия удаления

Чтобы получить объект owner с сервера, мы добавим функцию componentDidMount прямо над функцией рендеринга:

componentDidMount = () => {
    const id = this.props.match.params.id;
    const url = '/api/owner/' + id;
    this.props.onGetOwnerById(url, { ...this.props });
}

Теперь, если мы перейдем к компоненту OwnerDelete, мы увидим страницу с правильными данными:

Чтобы кнопка "Отмена" работала, давайте добавим эту функцию:

redirectToOwnerList = () => {
    this.props.history.push('/owner-List');
}

Затем реализуем действие удаления:

deleteOwner = (event) => {
    event.preventDefault();

    const url = "/api/owner/" + this.props.data.id;

    this.props.onDeleteOwner(url, { ...this.props });
}

Мы можем проверить результат:

Если мы нажмем кнопку ОК, мы будем перенаправлены на компонент OwnerList.

Заключение

Мы завершили наш путь к этому проекту React. Надеемся, вам понравилось так же, как и нам.

Спасибо, что прочитали статью, и я надеюсь, что вы нашли в ней что-то полезное.