ReactJS Flux Utils 组件

Question

有有趣的article 其中描述了Flux Utils 中公开的 4 个主要类。

1. 商店
2. 减少存储
3. MapStore（从 3.0.0 中删除）
4. 容器

但在某些情况下应该使用什么还不是很清楚。 ReduceStore 和 Container 只有 2 个示例，但遗憾的是没有其他示例。

您能否解释一下这 4 个组件的基本用法：when 和 where 它们应该用于现实生活？

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

更新：

MapStore 从3.0.0开始一直是removed

Answer 1

通过查看code 并阅读方法文档，这是我可以解决的问题（我自己没有使用过这些类，因为我使用了其他 Flux 框架）。

实际上，以几乎相反的顺序排列这些实际上很有用。

容器

这不是FluxStore 的子类，因为不出所料，它不是商店。 Container 是 React UI 组件的包装类，可自动从指定存储中提取状态。

例如，如果我有一个 React 驱动的聊天应用程序，其组件列出了我所有登录的朋友，我可能希望它从 LoggedInUsersStore 中提取状态，假设是这些用户的数组.

我的组件看起来像这样（源自他们提供的代码示例）：

import {Component} from 'react';
import {Container} from 'flux/utils';

import {LoggedInUsersStore} from /* somewhere */;
import {UserListUI} from /* somewhere */;

class UserListContainer extends Component {
  static getStores() {
    return [UsersStore];
  }

  static calculateState(prevState) {
    return {
      loggedInUsers: LoggedInUsersStore.getState(),
    };
  }

  render() {
    return <UserListUI counter={this.state.counter} />;
  }
}

const container = Container.create(UserListContainer);

如果它的注册存储改变状态，这个包装器会自动更新组件的状态，并且它通过忽略任何其他更改来有效地更新（即它假设组件不依赖于应用程序状态的其他部分）。

我相信这是 Facebook 的 React 编码原则的一个相当直接的扩展，其中 UI 的每一点都存在于一个高级“容器”中。因此得名。

何时使用

• 如果给定的 React 组件完全依赖于几个显式存储的状态。
• 如果确实不取决于上面的道具。容器不能接受道具。

减少存储

ReduceStore 是一个完全基于 纯函数---对其输入具有确定性的函数（因此相同的函数总是返回相同的东西相同的输入）并产生没有可观察到的副作用（因此它们不会影响代码的其他部分）。

例如，lambda (a) => { return a * a; } 是纯：它是确定性的，没有副作用。 (a) => { echo a; return a; } 是不纯的：它有副作用（打印 a）。 (a) => { return Math.random(); } 是不纯的：它是不确定的。

ReduceStore 的目标是简化：通过使您的商店是纯粹的，您可以做出某些假设。因为缩减是确定性的，所以任何人都可以随时执行缩减并获得相同的结果，因此发送动作流几乎与发送原始数据相同。同样，发送原始数据是完全合理的，因为可以保证没有副作用：如果我的整个程序由ReduceStores 组成，并且我用另一个客户端的状态覆盖了一个客户端的状态（调用所需的重绘），我我保证完美的功能。由于动作而不是数据，我的程序中的任何内容都不会改变。

无论如何，ReduceStore 应该只实现其文档中明确列出的方法。 getInitialState() 应该确定初始状态，reduce(state, action) 应该在给定 action 的情况下转换 state（并且根本不使用 this：这将是不确定的/有副作用），以及 getState() 和 @987654344 @ 应该处理将原始状态与返回状态分开（这样用户就不会意外修改它）。

例如，计数器将是一个明智的ReduceStore：

class TodoStore extends ReduceStore {
    getInitialState() {
        return 0;
    }

    reduce(state, action) {
        switch(action.type) {
            case 'increment':
                return state + 1;
            case 'decrement':
                return state - 1;
            case 'reset':
                return 0;
            default:
                return state;
    }

    getState() {
        // return `this._state`, which is that one number, in a way that doesn't let the user modify it through something like `store.getState() = 5`
        // my offhand JS knowledge doens't let me answer that with certainty, but maybe:
        var a = this._state + 1;
        return a - 1;
    }
}

请注意，没有任何转换显式依赖于对象的当前状态：它们仅对传递的state 变量进行操作。这意味着 store 的一个实例可以为同一个 store 的另一个实例计算状态。在当前的 FB Flux 实现中不是很有用，但仍然有用。

何时使用

• 如果你喜欢纯函数式编程（耶！）
• 如果您不喜欢使用明确构建的框架（redux、NuclearJS）
• 并且您可以明智地编写一个纯功能性的商店（大多数商店都可以，如果不能，多考虑一下架构可能是有意义的）

注意：此类不确保您的代码是纯功能的。我的猜测是，如果你不自己检查它就会坏掉。

我会一直使用这家商店。除非我可以使用...

FluxMapStore [已弃用]

这个类不再是 Flux 的一部分！

这是ReduceStore 的子类。正是这种纯功能性商店恰好在内部是 Maps。具体来说，Immutable.JS 映射（另一个 FB 东西！）。

他们有方便的方法从状态中获取键和值：

WarrantiesStore.at('extended') 而不是WarrantiesStore.getState().get('extended')。

何时使用

• 同上，但也
• 如果我可以使用地图来代表这家商店。

通量商店

这将我们带到FluxStore：Flux Store 概念的包罗万象的 Store 类和通用实现。

另外两家店是它的后代。

在我看来，文档对它的用法相当清楚，所以我将保留它

何时使用

• 如果您不能使用其他两个 Store util 类来保存您的数据
• 而且您不想开设自己的商店

在我的情况下，这永远不会：我更喜欢像 redux 和 NuclearJS 这样的不可变框架，因为它们对我来说更容易推理。我注意以纯粹的功能方式来构建我的商店。但如果你不这样做，这门课很好。