reactjs - Flux 和 React 中的单位转换、权限和其他转换

标签 reactjs reactjs-flux

开门见山:单位转换(用于显示和输入)、权限检查和其他与表示相关的转换等行为属于 Flux 架构中的什么位置?

在我们的例子中,“其他与演示相关的转换”的一个示例是将用户布局设置应用于 View 。例如,用户可以定义在摘要 View 中查看哪些数据字段以及查看这些数据的顺序。

我们认为我们理解了这个问题解决方案的一部分:这些转换是应用程序状态并存在于各种状态存储中(“WeekSummaryLayoutStore”、“UnitPreferencesStore”)。设置/获取、编辑和检索这些状态的流程很好理解。

我们想要探索的是在哪里应用这些状态来获得最终的呈现结果并与 Flux 架构保持一致。我们提出了多种选择:

1) React 组件 Mixin 在每个叶组件的“render”方法中处理诸如单位转换之类的事情。各种表示状态存储被直接插入到组件的构造函数中,并且 Mixin 会自动连接事物(监听各种状态存储、更新等)。

2) 使用中间存储 WeekSummaryPresentationDataStore,它监听 WeekSummaryDataStore、WeekSummaryLayoutStore 和 UnitPreferencesStores 并吐出最终的演示数据;然后,该组件会监听正确的 ***PresentationStore 并处理更新和渲染,就像处理任何其他存储一样。

3) 集成原始数据存储中的所有转换,让存储仅输出可用于演示的数据。

支持/反对各自的论点?

1) 最终的叶组件应该是唯一知道如何“呈现”数据的模块。可以说,单位转换、应用布局以及根据权限确定数据详细信息是此表示逻辑的一部分。几个额外的层,但很好地解耦,原始数据存储不需要了解任何有关进一步转换的信息。每个存储的核心业务逻辑可以跨组件重用,然后每个组件可以根据不同的呈现状态存储以不同的方式呈现数据。

2)增加什么复杂性?

3) 可以说,某些表示逻辑是业务逻辑的一部分,并且可以由核心数据存储拥有。显着降低了复杂性,但如果组件需要相同的核心存储但不同的表示状态,则允许重复业务逻辑。

想法?

最佳答案

如果您的转换是“纯”函数,那么它们可以存在于 Utils 模块中。例如,DateTimeUtils。我的意思是函数式编程意义上的“纯粹”:无状态,不需要任何未通过方法参数传入的有状态信息。相同的输入总是会产生相同的输出。

Utils 是静态函数包,没有特定于应用程序的依赖项(尽管 WebAPIUtils 模块是此规则的一个显着异常(exception),因为它需要 API 调用所需的存储中的所有数据)。现在,任何需要它们的组件或商店都需要这些不依赖于应用程序的 Utils 模块。

当然,您可以为 View 层创建一个 mixin。但我个人更喜欢静态方法 Utils 模块而不是 mixins,因为它更容易理解方法的定义位置。

至于是否应该存储转换,我认为您可能不应该,但这可能需要根据具体情况来决定。这感觉就像紧密耦合 View 层和数据层,它们可能应该更加独立地运行。

关于reactjs - Flux 和 React 中的单位转换、权限和其他转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26593732/

相关文章:

javascript - 无法创建对象数组结构并向数组添加值

reactjs - 像亚马逊一样具有放大效果的 React 图片库

javascript - 调度程序未在 Jest 单元测试中注册回调

javascript - React onChange 事件不会触发

ReactJS Flux Utils 组件

javascript - Material-UI样式: convert functional component to class component

javascript - 如何将 reactjs 文件与 css 连接

javascript - 如何使 Material ui dropzone 区域不允许重复?

javascript - 在 react 中将数据从一个组件传递到另一个组件

javascript - 双向数据绑定(bind)(Angular)与单向数据流(React/Flux)