React/Flux - 保持状态属性有条理？答案

【问题标题】：React/Flux - Keeping Status Attributes Organized?React/Flux - 保持状态属性有条理？
【发布时间】：2015-10-07 12:49:14
【问题描述】：

在 react/flux 中响应触发操作似乎很常见，这些操作在状态数据上设置特定状态属性，以便组件通过呈现 this 和 that 来做出反应。

简单示例：用户单击待办事项列表项组件上的“完成”按钮，它会触发一个操作，在商店中的该项目上设置complete: true，组件重新呈现并通过呈现友好的复选标记来对该“完成”状态属性做出反应。

不那么简单的示例： 应用程序开始从您的 API 加载数据集合，因此您使用 loading: true 初始化您的商店，并且您的组件通过呈现微调器来做出反应。加载完成后，一个动作会设置loading: false，因此组件将继续渲染项目……但如果出现错误，该动作也会触发error: true，提示组件呈现一些红色警告文本。现在你有两个切换要管理，如果你再试一次就取消设置错误标志，等等。

真正不那么简单的示例： 用户单击待办事项列表项上的“编辑”按钮，因此您在该项目上设置 editing: true，以便组件呈现表单的显示器。然后，用户点击提交按钮。现在您有了editing: true 和submitting: true，以防您想在更新传输过程中防止重复提交。然后，如果出现错误，您需要关闭submitting，但保持editing 为真，并添加带有消息的error 标志，现在如果用户只是离开页面，您必须清除所有这些起来……

那么......我们如何让所有这些东西保持理智？持续的？可读吗？这种状态数据是否有模式/约定/实用程序？我们如何将所有这些状态标志与我们的实际数据（我们加载并可能想要提交回 API 的内容）分开，而不必将我们添加的所有这些额外信息位丢弃？

也许这一切都归结为编写干净的代码，但我知道这种领域可能还有更多需要感谢...

【问题讨论】：

听起来你可以使用状态机。

标签： javascript reactjs flux

【解决方案1】：

我建议不要使用标志（布尔值），而是使用currentStatus 字段。然后，您可以使用常量为该字段赋予值。比如……

var Status = { LOADING: 1, EDITING: 2 };

等等。如果您可能同时拥有多个状态（现在无法提供一个像样的示例），您可以使用 JS 的 Bitwise ops。

Status = {
  LOADING: 1,
  EDITING: 2,
  SUBMITTING: 4,
  SOMETHING_ELSE: 8
};

// Let's say I'm loading and doing something_else
var currentStatus = Status.LOADING + Status.SOMETHING_ELSE;

// Am I editing?
console.log(Status.EDITING & currentStatus); // 0, so no

// Am I doing something_else?
console.log(Status.SOMETHING_ELSE & currentStatus); // non-zero? Then true

【讨论】：