ReactJS Flux Utils 组件

Posted 2023-02-22

【中文标题】ReactJS Flux Utils 组件

【英文标题】：ReactJS Flux Utils components

【发布时间】：2016-05-06 09:54:26

【问题描述】：

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

商店 减少存储 MapStore（从 3.0.0 中删除） 容器

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

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

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

更新：

MapStore 从3.0.0开始一直是removed

【问题讨论】：

文章里好像没有MapStore了

@DanEsparza 谢谢。更新了问题。

【参考方案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 这样的不可变框架，因为它们对我来说更容易推理。我注意以纯粹的功能方式来构建我的商店。但如果你不这样做，这门课很好。

【讨论】：

很棒的解释！我有一个问题。如果我有一个将对象数组存储为其状态的 ReduceStore，并且有一个来自调度程序的“搜索/过滤”操作怎么办。我应该在 reduce 方法中返回过滤状态吗？问题是，如果我这样做，那么我的状态总是会变小（由于输入更多字符），但是当用户清空搜索字符串时，我的状态将一无所有。这种情况应该怎么办？

在这种情况下，也许您会想要一个单独的商店 :)。或者您不使用 ReduceStore，或者您添加另一个键，例如 originalData 和 filteredData。

嗨，非常感谢您的解释。我正在尝试为我的第一个 Flux 应用程序拼凑这些部分。我有一个问题。示例中的 UserListContainer 如何/在哪里被实例化，因为它没有被导出。

在我的示例中它没有被实例化。您必须导出所有这些类才能使用它们。

我认为const container = Container.create(CounterContainer); 应该是const container = Container.create(UserLIstContainer);。对吗？