REST(HATEOAS)和ReactJS

Question

我有兴趣使用REST 的HATEOAS原则来减少SPA应用程序中的业务逻辑.在React特定的背景下,我想知道是否存在使这种做法变得不切实际的挑战,如果没有,那么有什么好的策略可以遵循？

使用HATEOAS从UI中删除业务逻辑的概念示例:

• 将有效的银行帐户操作委派给REST服务
• 将基于角色的访问控制委派给REST服务

我只发现一个链接表明React/Flux与HATEOAS策略不兼容,并且其他地方没有有意义的讨论.在React/Flux应用程序中它真的不可行吗？SO帖子没有得到足够的重视.有没有人有最喜欢或推荐的方法来取得成功(有或没有Flux或Redux)？

有人给出了一个在Angular上下文中利用HATEOAS的相当详细的例子.我正在为React寻找类似的东西.

就个人而言,我正在描绘rel超媒体链接中的标签,控制渲染哪些JSX组件(条件JSX).对于真实世界的React应用来说,这是天真的吗？也许有条件地渲染的React组件太粗糙,无法以这种方式使用？

我假设超媒体链接由HAL实现提供,或者符合ATOM提要约定(RFC4287).

Answer 1

100% HATEOAS 兼容 React & Flux，HATEOAS 兼容 Angular，HATEOAS 兼容 JQuery 甚至 vanilla JS。

HATEOAS 不会对消费客户端强加任何技术或实施要求。

HATEOAS 实际上只是一个您可以设计 API 的概念（您可以使用多种标准之一，但如HAL）

基本上，如果您可以调用 API，那么您就可以实现 HATEOAS 客户端。

那么如何到达那里：

• 第 1 步，您通常如何在 React 中进行 API 调用？用同样的方法做。
• 第二步，询问回复。
• 第 3 步，根据响应，在 UI 中适当响应。

例如，调用 order api /orders，我得到以下响应：

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

由此我可以推断出这next是一个有效的关系，如果我去那个 href 我实际上会收到第二页订单，所以在这种情况下，在 UI 中显示下一个按钮。

但是，如果我收到以下回复：

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

然后我可以推断这next不是一个有效的关系，并且在我的 UI 中我应该禁用或不显示下一步按钮。

没有魔法，它只是一种思维的改变，一种新的范式。

Answer 2

在我说出我最有可能错误/不相关的答案之前，我只想让你知道我刚刚阅读了 HATEOAS 是什么。从我简要阅读的内容来看，该警告似乎主要是关于 API 告诉您如何通过为您提供一个返回到与您刚刚请求的资源相关的资源的链接来导航自身。

既然如此，我不明白为什么你不能在你的操作中实现动态 url ajax 调用，这将根据提供给你的内容改变 SPA 的应用程序状态（即 Redux），但是，你会仍然需要有一些东西来以可视方式表示应用程序所有部分的状态。这是一个粗略的半伪的、没有经过深思熟虑的表述，大致基于您的银行帐户示例：

// 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
  })
}

您的应用程序仍然知道它在 SPA 中正在做什么，但是，这将允许 API 指导您调用哪里来执行需要执行的任何操作。希望能帮助到你。