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组件侦听ActionStore以接收数据：

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

根据几个教程，我应该在bootstrap中启动我的商店，所以我在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 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

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

1 个答案: