如何在 React 组件之间共享 API

Question

我有一个 API 可以返回系统中用户喜爱的所有对象 (GET /loves.json)。我正在展示一组对象，如果用户喜欢使用 react 的给定产品，我想使用一次 API 调用来“着色”。到目前为止，我有：

components/love.js.jsx.coffee：

class Components.Love extends React.Component
  @propTypes =
    id: React.PropTypes.number
    type: React.PropTypes.string

  constructor: (props) ->
    super(props)
    @state = Loves.Fetcher.shared()

  loved: ->
    this.state.loved(@props.id, @props.type)

  text: ->
    if @loved() then "Loved" else "Unloved"

  render: ->
    return React.DOM.div {}, @text()

loves/fetcher.js.coffee：

class Loves.Fetcher
  instance = null
  @shared: -> instance ?= new Loves.Fetcher

  constructor: ->
    @fetch()

  loved: (id, type) ->
    return ...

  fetch: ->
    $.get "/loved.json", (data) -> ...

index.html：

<h1>Shoes</h1>
<div data-react-class="Components.Love" data-react-props="{'id':1,'type':'Product'}"></div>

<h1>Pants</h1>
<div data-react-class="Components.Love" data-react-props="{'id':2,'type':'Product'}"></div>

<h1>Again</h1>
<div data-react-class="Components.Love" data-react-props="{'id':1,'type':'Product'}"></div>

<h1>Pants (Again)</h1>
<div data-react-class="Components.Love" data-react-props="{'id':2,'type':'Product'}"></div>

但是，我不确定如何继续。当状态发生变化时（例如通过 HTTP 请求）通知组件以更新它们的 React 方式是什么？共享 API 结果的任何其他好方法（我绝对不希望每个爱组件都有 HTTP 请求）？我希望能够将爱组件放置在任何地方，而不是依赖于父/子关系。

Answer 1

您可能想开始使用Flux。在 Flux 架构中，您的组件将触发操作，例如，getLove 操作。此操作将被拦截并发送到商店，例如LoveStore。

Store 保存代表应用程序模型（或其中一部分）的数据。 Action 修改模型。在您的情况下，LoveStore，由于 getLove 操作，将触发 GET 请求，获取数据并更新模型。

模型更新后，LoveStore 会发布更改。需要该数据的组件将监听LoveStore 中的更改：一旦收到通知，它们就会更新其内部状态。更新它们的内部状态会触发render() 方法。

您可以看到一些好处：

• 模型与您的组件分离
• API 可以集中在不同的文件 (LoveFetcher) 中，并由商店调用，这是唯一可以访问和修改模型的实体
• 使用发布/订阅模式，对数据更改感兴趣的组件会监听正确的存储，就是这样
• 数据流是单向的，这是 Flux 架构的一大特点，它保证了每个组件与页面模型的一致性。

Answer 2

创建一个容器组件，将数据作为状态保存，并将其作为属性传递给子组件。

More info in the docs

子组件将是您编写的 Components.Love 类，但您必须更改这些组件，使它们不具有 loved 作为状态，而是作为由父组件引入的属性。