React Reflux：启动存储和更新依赖组件的正确方法

Question

我只是从 Reflux 和 React 开始。我看过几个 React/flux 教程/视频，但我还没有找到正确的方法来使用 Reflux/React 和 React Router 设置我的应用程序：

想象一下，我有以下网址：localhost:9000/projects/1/roles/2/action/3。根据 url，我应该能够追溯应用程序的状态。所以在我的 Route 处理程序中，我有以下设置：

App.cjsx

routes = (
  <Route handler={AppWrapper}>
    <Route name="project" ...
    <Route name="action" handler={Action} path="/project/:project_id/roles/:role_id/actions/:action_id" />
  </Route>
)

在这种情况下，{Action} 是应该从商店接收数据的组件。这个 Action-component 监听 ActionStore 来接收数据：

componentWillMount: () ->
  actionStore.listen (actions) =>
    @setState({ actions: actions })

根据几个教程，我应该在引导程序中启动我的商店，所以我在我的 App.cjsx 中添加了以下行：

ActionStore     = require('./stores/ActionStore.cjsx') 

actionstore 有以下启动方法：

actionStore = Reflux.createStore 
    init: () ->
        $.ajax
          url: 'rest/mock' + period.name + '.json'
          dataType: 'json'
          success: (actions) =>
            @trigger(actions)
          error: (xhr, status, err) ->
            console.log('err:' + err)
        return  

module.exports = actionStore

我的问题是应用程序中的流程不正确。现在的流程是：

1. 创建和启动 ActionStore
2. 商店从服务器启动和加载操作
3. 启动 Action 组件（将监听器添加到商店）

所以actionstore已经接收到数据，之后组件被初始化，所以它永远不会从actionstore获得触发器。如何以正确的方式使用 React Router 和 Reflux 进行设置？

Answer 1

您的 ActionStore 可以将 actions 数据保存在本地 state 变量中，并让组件通过 actionStore.getState() 访问它。

因此，在您的组件中，您可以简单地做

getInitialState: () ->
  actionStore.getState()

componentWillMount: () ->
  actionStore.listen () =>
    @setState(actionStore.getState())

你的商店看起来像

actionStore = Reflux.createStore 
    init: () ->
        @state = {};

        $.ajax
          url: 'rest/mock' + period.name + '.json'
          dataType: 'json'
          success: (actions) =>
            @state = { actions }
            @trigger()
          error: (xhr, status, err) ->
            console.log('err:' + err)
        return

    getState: () ->
        @state

module.exports = actionStore