web-dev-qa-db-ja.com

REST（HATEOAS）およびReactJS

[〜＃〜] hateoas [〜＃〜] の原則RESTを使用して、SPAアプリケーションのビジネスロジックを削減することに興味があります。React-特定の状況で、これを非現実的にする課題があるかどうかを知りたいのですが、そうでない場合は、従うべき良い戦略は何ですか？

HATEOASを使用してUIからビジネスロジックを削除する概念的な例：

React/FluxはHATEOAS戦略と互換性がありません を示唆するリンクを1つだけ見つけましたが、他に意味のある議論はありません。 React/Fluxアプリでは本当に実現可能ではありませんか？そのSO投稿は十分な注目を集めていませんでした。成功を達成するためのお気に入りまたは推奨のアプローチ（FluxまたはReduxの有無にかかわらず）はありますか？

誰かが AngularのコンテキストでHATEOASを活用する のかなり詳細な例を示しました。 Reactに似たものを探しています。

個人的には、どのJSXコンポーネントがレンダリングされるかを制御するハイパーメディアリンクのrelタグを描いています（ 条件付きJSX ）。それは現実の世界ではナイーブですかReactアプリ？おそらく条件付きでレンダリングされたReactコンポーネントは粗すぎて、このように使用できませんか？

ハイパーメディアリンクは [〜＃〜] hal [〜＃〜] 実装によって提供されるか、またはATOMフィード規則（- RFC4287 ）。

restreactjsreduxfluxhateoas
19
Brent Arias

100％HATEOAS IS React＆Fluxと互換性があり、HATEOASはAngularと互換性があり、HATEOASはJQueryとVanillaJSと互換性があります。

HATEOASは、消費するクライアントに技術的要件や実装要件を課しません。

HATEOASは、実際にはAPIを設計できる概念にすぎません（ [〜＃〜] hal [〜＃〜] のように、いくつかの標準の1つを使用できます）

基本的に、APIを呼び出すことができれば、HATEOASクライアントを実装できます。

だからそこに着く方法：

  • ステップ1、通常、ReactでAPI呼び出しをどのように行いますか？同じようにします。
  • ステップ2、応答を問い合わせます。
  • ステップ3は、応答に基づいて、UIで適切に応答します。

たとえば、注文api /ordersを呼び出すと、次の応答が返されます。

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

このことから、nextは有効な関係であり、そのhrefにアクセスすると、実際には2ページ目の注文が届くため、この場合はUIに次のボタンが表示されます。

ただし、次の応答を受け取った場合：

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

次に、nextは有効な関係ではないと推測できます。また、UIで無効にするか、次のボタンを表示しないようにする必要があります。

魔法はありません。それは単に思考の変化であり、新しいパラダイムです。

3
shenku

私が最も可能性の高い間違った/無関係な答えを吐き出す前に、私はちょうど今HATEOASが何であるかについて読んだことをあなたに知らせたいと思います。そこでの警告は、私が簡単に読んだことから、HATEOASは主に、要求したばかりのリソースに関連するリソースへのリンクを提供することによって、それ自体をナビゲートする方法を示すAPIに関するもののようです。

その場合、提供された内容に基づいてSPAのアプリケーション状態（つまりRedux）を変更する動的URLajax呼び出しをアクションに実装できない理由はわかりませんが、それでも、アプリケーションのすべての部分で状態を視覚的に表すものが必要です。これは、あなたの銀行口座の例に大まかに基づいて、私が意味することの大まかな半疑似であまりよく考えられていない表現です：

// 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は、実行する必要のあるアクションの呼び出し先を指示できます。それが役に立てば幸い。

1
Mike S.