REST (HATEOAS) and ReactJS

100% HATEOAS IS compatible with React & Flux, HATEOAS is compatible with Angular, HATEOAS is compatible with JQuery and even vanilla JS.

HATEOAS doesn't not impose any technical or implementation requirements on a consuming client.

HATEOAS is in fact simply a concept to which you can design your API (you can use one of several standards though like HAL)

Basically if you can call an API then you can implement a HATEOAS client.

So how to get there:

• Step 1, how would you normally do an API call in React? Do it the same way.
• Step 2, interrogate response.
• Step 3, based on response, respond in the UI appropriately.

For example given a call to the order api /orders, I get the following response:

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

From this I can infer that next is a valid relation, and that if I go to that href I would in fact receive a second page of orders, so in this case in the UI show the next button.

However if I had received the following response:

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

Then I could infer that next is not a valid relation, and in my UI I should disabled or not display a next button.

There is no magic, it is simply a change in thinking, a new paradigm.

Before I spout off my most likely wrong/irrelevant answer, I just want to let you know that I just now read up on what HATEOAS is. That warning there, from what I've briefly read, HATEOAS seems to be mostly about the API telling you how to navigate through itself by providing you a link back to the resources that are relevant to the resource you had just requested.

That being the case, I don't see a reason why you can't implement dynamic url ajax calls in your actions that will alter your SPA's application state (i.e. Redux) based on what has been provided to you, however, you'll still need to have something to represent the state in a visual manner for all parts of your application. Here's a crude semi-pseudo and not very well thought-out representation of what I mean based loosely on your bank account example:

// our component fileimport 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 fileimport store from 'store' // our redux storeimport axios from 'axios' // an ajax libraryexport function makeAWithdrawl(url) {  return axios.post(url).then(function(resp){    store.dispatch({      type: 'MAKE_WITHDRAWL',      action: resp.data    }) // do your reducer stuff  })}

Your application still knows what it's doing in the SPA, however, this will allow the API to direct you where to call to for whatever action needs to be performed. Hope it helps.