使用 Flux 和 React 处理 UI 状态

Question

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

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

使用 Flux 时，我们会触发一个动作，例如：

ItemActions.voteUp(ITEM_ID)

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

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

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

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

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

场景 A：处理 UI 状态以响应 Action

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

目标是关闭 Item 组件以响应操作，并且不要弄乱其他组件的状态

将商店视为状态袋。如果 List A 和 List B 应该有完全独立的数据，我会这样做：

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

基本上必须为您的两个项目维护两个项目itemsA and itemsB。