标签: reactjs-flux

我正在尝试了解Flux示例聊天应用.作者提到了这种单向数据流:

但是,在示例应用程序中,Action Creators(ChatMesssageActionCreator)和Stores(MessageStore)之间以及Stores(MessageStore,ThreadStore)和Web API Utils(ChatMessageUtils)之间存在依赖关系,这似乎违反了单向数据流规则:

是建议遵循给定的例子,还是应该设计一个更好的模式？

更新

我发现ChatMessageUtils不属于Web API Utils,因此商店中的两个箭头不应指向那里,因此可能它们没问题.然而,ActionCreator和Store之间的联系似乎仍然很奇怪.

我想做这样的事情

var App = React.createClass({
    render: function() {
        return (
            <CountryAutoComplete />
        )
    }
});

不同的应用

var App2 = React.createClass({
    render: function() {
        return (
            <CountryAutoComplete />
        )
    }
});

这是一个简单的自动完成(不是整个文件)

var AutoComplete = React.createClass({
    componentDidMount: function() {
        $(this.getDOMNode()).typeahead(this.props);
    },
    render: function() {
        return (
            <input type="text" class="typeahead" onChange={this.props.onChange} />
        );
    }
});

CountryAutoComplete将是这样的自包含.

var CountryAutoComplete = React.createClass({
    search: function(country, process) {
        // Make an ajax call and return the data. No other components needed
        $.ajax({
            url: '/country' + '?search=' …

我喜欢Zurb Foundation(SASS,尤其是Zurb Foundation for Apps),但我想将它与Facebook ReactJS和Flux一起使用

这是删除AngularJS并用ReactJS/Flux替换它.Kiran Abburi已经迈出了实现这一目标的良好开端:

https://github.com/akiran/react-foundation-apps

http://webrafter.com/opensource/react-foundation-apps

人们如何看待使用Zurb Foundation for Facebook与Facebook ReactJS/Flux这样的长期可行性？

从技术和生态系统的角度(例如更新).

或者,像Zurb Foundation(或Twitter Bootstrap)这样的CSS框架对ReactJS/Flux来说真的很有用.

谢谢,阿什利.

想象一下像Quora这样的东西.

[
  {
    type: "question",
    answers: [
      {
        type: "answer",
        upvotes: [
          {
            type: "upvote"
          }
          /* more upvotes */
        ],
        comments [
          {
            type: "comment"
          }
          /* more comments */
        ]
      }
      /* more answers */
    ]
  }
  /* more questions */
]

我肯定会有类似的东西QuestionsStore.但对于所有儿童实体,我不确定如何处理它们.来自Backbone我认为每个答案应该有一个UpvotesStore和一个CommentsStore组件将从这些商店获取他们的数据并订阅他们的更新.据我所知,Flux,"儿童"/关系商店有点不常见.

当每个组件订阅更新时QuestionsStore,会导致类似:

/* in CommentsComponent */
onUpdate: function() {
  this.setState({
    comments: QuestionsStore.getComments({questionId: 1, answerId: 1});
  });
}

或更极端:

/* in CommentComponent */
onUpdate: function() {
  this.setState(QuestionsStore.getComment({questionId: …

为了响应状态变化,我想触发另一个状态变化.这本质上是一个坏主意吗？

特定类型的场景是组件被建模为状态机,根据值来呈现不同的信息this.state.current_state.但外部事件可以通过通量存储器改变状态来提示它经历状态转换.这是一个人为的想法来实现这个想法:

我认为正确的生命周期方法是这样做的shouldComponentUpdate.这样的效果:

shouldComponentUpdate: function(nextProps, nextState) {
    if (nextState.counter > 4 && this.state.current_state !== DISPLAY_MANY) {
        this.setState({ current_state: DISPLAY_MANY });
    }
    return true;
}

在某些子组件中,counter可能会增加,所以counter我不想根据某个变量的值推断它会显示什么,而是想明确地编码状态.

真实场景比这更复杂,但希望这个场景足够详细,以便了解这个想法.做我正在想的事情可以吗？

编辑:修复代码示例,以避免通过添加额外的状态条件触发无限循环

说我有一个TodoStore.TodoStore负责保存我的TODO物品.Todo项目存储在数据库中.

我想知道将所有待办事项加载到商店中的推荐方法是什么以及视图应如何与商店交互以在启动时加载TODO项目.

第一种方法是创建一个loadTodos动作,从数据库中检索Todos并发出一个TODOS_LOADED事件.然后,视图将调用该loadTodos操作,然后侦听该TODOS_LOADED事件,然后通过调用自行更新TodoStore.getTodos().

另一种选择是没有loadTodos动作,并且具有TodoStore.getTodos()将返回现有TODO项目的承诺.如果TodoStore已经加载了TODO项目,它只返回它们; 如果没有,那么它将从数据库中查询并返回检索到的项目.在这种情况下,即使商店现在已经加载了TODO项目,它也不会发出TODOS_LOADED事件,因为getTodos它不是一个动作.

function getTodos() {
   if (loaded)
      return Promise.resolve($todoItems);
   else
      return fetchTodoItemsFromDatabase().then(todoItems) {
         loaded = true;
         $todoItems = todoItems;
         return $todoItems;
      });
}

我相信很多人会说这会打破Flux体系结构,因为getTodos函数正在改变存储状态,只有通过调度程序发送的操作才能更改存储状态.

但是,如果您认为TodoStore的状态是数据库中现有的TODO项,那么getTodos实际上并没有改变任何状态.TODO项目完全相同,因此不需要更新或通知视图.唯一的事情是,现在商店已经检索了数据,因此它现在缓存在商店中.从View的角度来看,它不应该真正关心Store的实现方式.如果商店仍然需要从数据库中检索数据,它应该不在乎.所有关注的视图都是他们可以使用Store来获取TODO项目,并且Store会在创建,删除或更改新TODO项目时通知他们.

因此,在这种情况下,视图应该只调用TodoStore.getTodos()在加载时呈现自己,并在TODO_CHANGE上注册事件处理程序,以便在需要由于添加,删除或更改而自行更新时得到通知.

您如何看待这两种解决方案？他们还有其他解决方案吗？

在通过所有者ID将数据划分为存储桶的通量应用程序中,我们应该使用一个内部将数据分成存储桶的存储,还是每个存储桶一个存储实例？

例如,我们有一名申请用户,他是多名运动员的教练.每个执教的运动员都有零次或多次训练,教练可以同时观看一名或多名运动员的训练.

我们可以为所有运动员提供一个健身商店; 商店必须确保所有数据都分成运动员桶,每个商店方法都需要一个athleteId参数.

或者,我们每个运动员身份可以有一个商店实例.这简化了商店逻辑和方法签名,但随后我们必须管理更多商店实例.

有没有人有这种方法的经验？以某种方式做到这一点的任何利弊？或者,哪种方式是'通量方式',为什么？

我有一个场景,我觉得我需要发送一个动作来响应另一个动作,我不知道解决它的最佳方法.

响应HTTP响应调度操作,例如:

type: 'auth'
data: { username: 'tom' }

由于该响应成功,我想发送一个动作将用户发送到主页:

type: 'navigate'
date: { where: 'home' }

这对我来说似乎是一个明智的流程:这件事发生了,所以现在我希望这件事发生.麻烦的是,Flux Dispatcher不允许这样做,因为我们仍处于调度周期.我知道为什么在调度时调度是一个坏主意.

有些人已经通过多个调度员解决了这个问题,而Flux的作者似乎确信您只需要一个,并且您需要重新考虑您的商店.

我不知道如何在不模糊意图的情况下重构我的商店以促进这一点.我UserStore知道auth行动,我RouteStore知道navigate行动.关于如何改变商店以促进这一点的任何建议将不胜感激.

我觉得setImmediate它会起作用,但看起来有点脏.我还认为排队行动的调度员可能有所帮助,但我可以感觉到这可能会导致令人讨厌的问题.

最好的方法是什么？

有一篇有趣的文章 描述了在FluxUtils中公开的4个主要类.

1. 商店
2. ReduceStore
3. MapStore(已删除3.0.0)
4. 容器

但是,对于某些情况应该使用什么并不是很清楚.只有2例为ReduceStore和Container,但对于其他可惜没样品.

能否请您解释一下这4个组件的基本用法:当和在那里他们应该在现实生活中使用？

非常感谢扩展答案和代码示例!

更新:

MapStore已删除从开始3.0.0

我试图从API中检索一些数据并将其传递给我的应用程序.不过是React/Redux的新手,我想知道从哪里调用这些调用以及如何将它传递到我的应用程序中？我有标准的文件夹结构(组件,缩减器,容器等),但我不知道现在在哪里放置我的API调用.