REST (HATEOAS)和ReactJS
我感兴趣的是使用REST的HATEOAS原则来减少SPA应用程序中的业务逻辑。在React特定的上下文中，我想知道是否存在使这一点不切实际的挑战，如果没有，有什么好策略可以遵循？
使用HATEOAS从UI中删除业务逻辑的概念性示例：
- Delegating valid bank account actions to the REST service
- Delegating role-based access control to the REST service
我只找到了一个建议React/Flux is not compatible with a HATEOAS strategy的链接，其他地方没有任何有意义的讨论。这在React/Flux应用程序中真的不可行吗？那个帖子没有得到足够的关注。有没有人有最喜欢的或推荐的成功方法(使用或不使用Flux或Redux)？
有人给出了一个相当详细的leveraging HATEOAS in the context of Angular示例。我正在为React寻找类似的东西。
就我个人而言，我想象的是超媒体链接中的rel标记，用于控制呈现哪些组件(conditional JSX)。对于一个真实的React应用程序来说，这是不是太天真了？也许有条件呈现的React组件太粗粒度，不能以这种方式使用？
回答 2
Stack Overflow用户
发布于 2016-10-27 10:44:52
100% HATEOAS兼容React & Flux，HATEOAS兼容Angular，HATEOAS兼容JQuery，甚至兼容vanilla JS。
HATEOAS不会对消费客户端强加任何技术或实现要求。
HATEOAS实际上只是一个概念，你可以用它来设计你的应用程序接口(你可以使用像HAL这样的几个标准中的一个)
基本上，如果您可以调用API，那么您就可以实现HATEOAS客户端。
那么如何做到这一点：
- 第1步，通常如何在React中进行API调用？执行相同的操作。在UI appropriately.
中，
- 第2步，询问响应。
- 第3步，根据响应进行响应
例如，给定对order api /orders的调用，我会得到以下响应：
{
"_links": {
"self": { "href": "/orders" },
"next": { "href": "/orders?page=2" }
}
}从这里我可以推断next是一个有效的关系，如果我转到那个href，我实际上会收到第二页订单，所以在本例中，UI中显示了next按钮。
但是，如果我收到以下响应：
{
"_links": {
"self": { "href": "/orders" },
}
}然后我可以推断next不是一个有效的关系，并且在我的UI中，我应该禁用或不显示next按钮。
没有魔法，它只是思维的改变，一种新的范式。
Stack Overflow用户
发布于 2016-08-06 11:29:08
在我说出我最可能的错误/无关紧要的答案之前，我只想让你知道，我刚刚阅读了什么是HATEOAS。这里的警告，从我简要阅读的内容来看，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指示您在需要执行的任何操作中调用的位置。希望能有所帮助。
https://stackoverflow.com/questions/35819806
复制相似问题
腾讯云开发者
