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

我只是从反流开始反应。我已经观看了多个React/flux教程/视频，但我还没有找到使用Reflech/React和React Router设置应用程序的正确方法：

假设我有以下url:localhost:9000/projects/1/roles/2/action/3。基于url，我应该能够追溯应用程序的状态。因此，在我的路由处理程序中，我有以下设置：

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>
)

根据一些教程，我应该在引导中启动我的商店，因此我在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

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

创建并启动ActionStore

存储从服务器启动和加载操作

启动操作组件（将侦听器添加到存储）

---

因此actionstore已经收到了数据，在组件初始化之后，它就永远不会从actionstore获取触发器。如何用正确的方法设置React路由器和回流

您的ActionStore可以将

操作

数据保存在本地

状态

变量中，并允许组件通过

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

---

这确实有效，但我应该如何处理url参数？存储区中无法访问Router.State.getParams（）。您可以在存储区上公开一个方法

getActions（params）

，该方法使用ajax检索操作，并在接收和存储数据时调用

@trigger（）

。然后，您只需要在组件的

componentWillMount（）

lifecycle方法中调用该方法。您可以使用从组件中检索url参数。但是，如果有多个组件侦听该存储，您会怎么做？哪一个应该调用存储以基于参数进行更新？我将在route handler组件中进行调用。

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