REST (HATEOAS) và ReactJS

Question

Tôi quan tâm đến việc sử dụng nguyên tắc HATEOAS của REST để giảm logic nghiệp vụ trong ứng dụng SPA. Trong một bối cảnh cụ thể phản ứng, tôi muốn biết nếu có những thách thức mà làm cho điều này không thực tế và, nếu không, một chiến lược tốt để làm theo là gì?

ví dụ khái niệm của việc sử dụng HATEOAS để loại bỏ logic kinh doanh từ UI:

• Delegating valid bank account actions to the REST service
• Delegating role-based access control to the REST service

Tôi đã chỉ tìm thấy một liên kết cho thấy React/Flux is not compatible with a HATEOAS strategy, và không có cuộc thảo luận có ý nghĩa ở nơi khác . Có thực sự không khả thi trong ứng dụng React/Flux không? Bài đăng SO đó không nhận được đủ sự chú ý. Có ai có một cách tiếp cận yêu thích hoặc được đề nghị để đạt được thành công (có hoặc không có Flux hoặc Redux)?

Ai đó đã đưa ra một ví dụ khá chi tiết về leveraging HATEOAS in the context of Angular. Tôi đang tìm cái gì đó tương tự cho React.

Cá nhân, tôi đang hình dung thẻ rel trong liên kết hypermedia kiểm soát thành phần JSX nào được hiển thị (conditional JSX). Đó có phải là ngây thơ cho một ứng dụng React trong thế giới thực không? Có thể các thành phần React đã được điều kiện quá thô sơ để sử dụng theo cách này?

Tôi giả định rằng các liên kết hypermedia được cung cấp bởi triển khai HAL hoặc tương thích với quy ước nguồn cấp dữ liệu ATOM (RFC4287).

Answer 1

Trước khi tôi giải thích câu trả lời sai lầm/không thích hợp nhất của mình, tôi chỉ muốn cho bạn biết rằng tôi vừa mới đọc về những gì HATEOAS là. Đó là cảnh báo ở đó, từ những gì tôi đã đọc ngắn gọn, HATEOAS dường như chủ yếu là về API cho bạn biết cách điều hướng thông qua chính nó bằng cách cung cấp cho bạn một liên kết quay lại các tài nguyên có liên quan đến tài nguyên bạn vừa yêu cầu.

Đó là trường hợp, tôi không thấy lý do tại sao bạn không thể thực hiện các cuộc gọi ajax url động trong các hành động sẽ thay đổi trạng thái ứng dụng SPA của bạn (nghĩa là Redux) dựa trên những gì đã được cung cấp cho bạn. , bạn vẫn sẽ cần phải có một cái gì đó để đại diện cho nhà nước một cách trực quan cho tất cả các phần của ứng dụng của bạn. Dưới đây là một thô bán giả và không phải là rất cũng nghĩ ra đại diện của những gì tôi có nghĩa là dựa lỏng lẻo trên ví dụ tài khoản ngân hàng của bạn:

// our component file 
import React from 'react' 
import { makeAWithdrawl } from './actions' 

export default React.createClass({ 
    handleClick: function(e) { 
    e.preventDefault() 
    makeAWithdrawl(this.props.account.withdraw.href) 
    }, 
    render: function() { 
    <div className="account"> 
     <p className="account_number">{this.props.account.accountNumber}</p> 
     <p className="balance">{this.props.account.balance}</p> 
     <p><a href={this.props.account.deposit.href}>Deposit</a></p> 
     {this.props.account.withdraw ? <p><a onClick={this.handleClick}>Withdraw</a></p> : ''} 
    </div> 
    } 
}) 


// our actions file 
import store from 'store' // our redux store 
import axios from 'axios' // an ajax library 

export function makeAWithdrawl(url) { 
    return axios.post(url).then(function(resp){ 
    store.dispatch({ 
     type: 'MAKE_WITHDRAWL', 
     action: resp.data 
    }) // do your reducer stuff 
    }) 
} 

ứng dụng của bạn vẫn biết những gì nó làm trong SPA, tuy nhiên, điều này sẽ cho phép API để hướng dẫn bạn nơi để gọi đến cho bất kỳ hành động nào cần phải được thực hiện. Hy vọng nó giúp.

Answer 2

100% HATEOAS IS tương thích với React & Thông lượng, HATEOAS tương thích với Góc, HATEOAS tương thích với JQuery và thậm chí cả vanilla JS.

HATEOAS không áp đặt bất kỳ yêu cầu kỹ thuật hoặc triển khai nào đối với ứng dụng khách tiêu thụ.

HATEOAS là trong thực tế đơn giản là một khái niệm mà bạn có thể thiết kế API của bạn (bạn có thể sử dụng một trong những tiêu chuẩn mặc dù như HAL)

Về cơ bản nếu bạn có thể gọi một API sau đó bạn có thể thực hiện một khách hàng HATEOAS.

Vậy làm thế nào để đạt được điều đó:

• Bước 1, làm thế nào bạn sẽ thường làm một cuộc gọi API trong Phản ứng? Làm theo cách tương tự.
• Bước 2, trả lời thẩm vấn.
• Bước 3, dựa trên phản hồi, trả lời trong giao diện người dùng một cách thích hợp.

Ví dụ được đưa ra một lời kêu gọi trật tự api /orders, tôi nhận được câu trả lời sau đây:

{ 
    "_links": { 
     "self": { "href": "/orders" }, 
     "next": { "href": "/orders?page=2" } 
    } 
} 

Từ đó tôi có thể suy ra rằng next là một mối quan hệ có giá trị, và rằng nếu tôi đi đến href rằng Tôi thực tế sẽ nhận được một trang thứ hai của đơn đặt hàng, vì vậy trong trường hợp này trong giao diện người dùng hiển thị nút tiếp theo.

Tuy nhiên nếu tôi đã nhận được phản ứng sau:

{ 
    "_links": { 
     "self": { "href": "/orders" }, 
    } 
} 

Sau đó, tôi có thể suy ra rằng next không phải là một mối quan hệ hợp lệ, và trong giao diện người dùng của tôi tôi nên tàn tật hoặc không hiển thị một nút bên cạnh.

Không có phép thuật, nó chỉ đơn giản là một sự thay đổi trong suy nghĩ, một mô hình mới.