Использование REST API с помощью React.js

Здесь мы используем подход с подъемом состояния. Вместо того чтобы поддерживать состояние в каждом дочернем компоненте и синхронизировать состояния и, следовательно, появление связанных компонентов, мы поднимаем общее состояние до их ближайшего общего предка. Итак, мы поддерживаем состояние в родительском  app компоненте с помощью функций обратного вызова, которые передаются дочерним компонентам через свойства. Затем мы вызываем функции обратного вызова внутри обработчиков событий в дочерних компонентах. В этих функциях мы изменяем состояние родительского компонента в соответствии с действиями пользователя, инициированными в дочерних компонентах. Основываясь на изменении состояния родительского компонента, React при необходимости повторно отображает дочерние компоненты. Например, посмотрите, как App.onEditItem() метод вызывается в ItemDetails.onEdit() обработчике событий, который срабатывает, когда пользователь нажимает кнопку «Изменить».

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

Примечание. Технология Redux обеспечивает еще более согласованный и эффективный способ управления состоянием модели компонента, особенно в крупных приложениях.

При условии, что у нас есть все сценарии, мы можем увидеть основное приложение по адресу  http: // localhost: 3000 :

Нажав на элемент в списке, мы можем увидеть детали элемента:

Если нам нужно отредактировать элемент, мы можем сделать подробный вид редактируемым с помощью кнопки «Редактировать»:

Также мы можем добавлять новые элементы с помощью кнопки New Item:

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

4. Реальное общение

Хотя React не предоставляет никакой встроенной поддержки для отправки запросов на сервер, мы можем использовать любую коммуникационную библиотеку в наших приложениях React. Давайте использовать Fetch API, который становится стандартным способом отправки HTTP-запросов и поддерживается в большинстве современных браузеров. Если у нас есть определенный интерфейс связи, мы можем легко заменить нашу реализацию фиктивного сервиса (см. Раздел 2) полнофункциональной версией, как показано ниже.

Листинг 4.1. src / shared / item-service, js — реальная функциональная версия ItemService:

import Configuration from './configuration';

class ItemService {

  constructor() {
    this.config = new Configuration();
  }

  async retrieveItems() {
    return fetch(this.config.ITEM_COLLECTION_URL)
      .then(response => {
        if (!response.ok) {
          this.handleResponseError(response);
        }
        return response.json();
      })
      .then(json => {
        console.log("Retrieved items:");
        console.log(json);
        const items = [];
        const itemArray = json._embedded.collectionItems;
        for(var i = 0; i < itemArray.length; i++) {
          itemArray[i]["link"] =  itemArray[i]._links.self.href;
          items.push(itemArray[i]);
        }
        return items;
      })
      .catch(error => {
        this.handleError(error);
      });
  }

  async getItem(itemLink) {
    console.log("ItemService.getItem():");
    console.log("Item: " + itemLink);
    return fetch(itemLink)
      .then(response => {
        if (!response.ok) {
            this.handleResponseError(response);
        }
        return response.json();
      })
      .then(item => {
          item["link"] = item._links.self.href;
          return item;
        }
      )
      .catch(error => {
        this.handleError(error);
      });
  }

  async createItem(newitem) {
    console.log("ItemService.createItem():");
    console.log(newitem);
    return fetch(this.config.ITEM_COLLECTION_URL, {
      method: "POST",
      mode: "cors",
      headers: {
            "Content-Type": "application/json"
        },
      body: JSON.stringify(newitem)
    })
      .then(response => {
       if (!response.ok) {
            this.handleResponseError(response);
        }
        return response.json();
      })
      .catch(error => {
        this.handleError(error);
      });
  }

  async deleteItem(itemlink) {
    console.log("ItemService.deleteItem():");
    console.log("item: " + itemlink);
    return fetch(itemlink, {
      method: "DELETE",
      mode: "cors"
    })
      .then(response => {
        if (!response.ok) {
            this.handleResponseError(response);
        }
      })
      .catch(error => {
        this.handleError(error);
      });
  }

  async updateItem(item) {
    console.log("ItemService.updateItem():");
    console.log(item);
    return fetch(item.link, {
      method: "PUT",
      mode: "cors",
      headers: {
            "Content-Type": "application/json"
          },
      body: JSON.stringify(item)
    })
      .then(response => {
        if (!response.ok) {
          this.handleResponseError(response);
        }
        return response.json();
      })
      .catch(error => {
        this.handleError(error);
      });
  }

  handleResponseError(response) {
      throw new Error("HTTP error, status = " + response.status);
  }

  handleError(error) {
      console.log(error.message);
  }

}
export default ItemService;

class Configuration {

  ITEM_COLLECTION_URL = "http://localhost:8080/collectionItems";

}
export default Configuration;