使用Flux和React处理UI状态

Question

使用MVC（特别是Angular），当我想要更改ui状态以响应数据更改时，我可以使用Callback或Promise在控制器级别处理它，如下所示：

API.voteUp(ITEM_ID).then(function () {
  $scope.isOpen = false;
});

使用Flux，而不是触发Action，例如：

ItemActions.voteUp(ITEM_ID)

但是没有办法直接对行动做出反应

我确实理解它背后的原因，知道大多数州应该存在于商店中，并且商店应该监听VOTE_UP操作并相应地更改UI状态。但是如果我需要为每个小UI打开一个商店，它感觉它不会很好地扩展。 我觉得Flux和View会很快结合起来。

下面是两个演示问题的方案。 目标是关闭Item组件以响应操作 并且不要搞乱其他组件的状态

此处提供的演示代码： https://github.com/asfktz/flux-ui-state-test

（我正在使用Alt Flux，但实施并不重要）

场景A：处理响应Action

的UI状态

1。打开项目A和项目B

2。投票给项目A

3。 'VOTE_UP'动作被解雇。

项目A应该关闭以响应行动 - 而不是

之前

（例如，如果操作失败则应保持打开状态）

场景B：处理相同操作的两个不同的非相关组件不应相互干扰。

1。在两个列表中打开项目A

2。投票列表B中的项目A.

3。列表B的项目A点火'VOTE_UP'动作

两个名单上的投票更新。

只有列表B的项目A应该关闭

注意：

This blog post描述了同样的问题

Answer 1

the goal is to close the Item component in response to action and do not mess with the state of the other componenets

Think of stores as bag of states. If List A and List B are supposed to have a totally independent data, I would do this:

render () {
    return (
        <div className="main">
            <div className="votes-block">
                <h2>Votes List A</h2>
                <List items={this.state.itemsA}/>
            </div>
            <div className="votes-block">
                <h2>Votes List B</h2>
                <List items={this.state.itemsB}/>
            </div>
        </div>
    )
}

Basically having to maintain two items itemsA and itemsB for your two items.