Redux/ReactJS：我应该在哪里存储状态的视觉细节？答案

【问题标题】：Redux/ReactJS: Where should I store visual details of a state?Redux/ReactJS：我应该在哪里存储状态的视觉细节？
【发布时间】：2016-06-02 21:06:42
【问题描述】：

我正在创建一个差旅费用计算器。你告诉它这个月你可能在哪里/如何乘坐地铁，它可以帮助你找出最佳的车票组合。要显示的主要结果是最佳选择 + 价格。

我想让它可扩展，这样如果用户点击总价，它会展开（带有动画）一个表格，解释价格是由什么组成的。稍微简化一下，应该是这样的：

使用 A 级票，费用为 $734 > | |用户点击网页或点击移动设备 | v 使用 A 级票，费用为 $734 > - 行程 1-10 花费 340 美元（每次 34 美元） - 11-20 次旅行的费用为 330 美元（每次 33 美元） - 21-22 次旅行的费用为 64 美元（每次 32 美元）

存储扩展/未扩展状态的好地方是什么？

在整个应用程序状态下，因为它仍然是一个状态，就像其他所有东西一样，并且有助于组件变得真正愚蠢 -> 还可以更轻松地在 Web 和原生之间进行移植。

然后点击该行会产生actions，会被reducers处理并修改一些expanded状态的key。
在组件内部，因为它是底层 UI 动画，与业务逻辑无关，甚至与应用内导航无关。

然后点击将在组件内部进行处理，它们将通过设置 CSS 类进行包装/解包。
有什么不同？

您在应用中使用什么？对于这种情况，是否有一些标准模式？

【问题讨论】：

标签： reactjs react-native redux react-redux

【解决方案1】：

我相信您的#2 是正确的。通常，与单个组件相关的状态（打开或关闭、标签索引、悬停、动画等）应保持在组件级别状态。

您可以使用以下设置初始状态：

constructor(props) {
    super(props);
    this.state = {
        expanded: false
    };
}

然后创建一个返回this.setState({ expanded: true )};的onClick函数

我可能会这样处理。

【讨论】：

【解决方案2】：

我也会说#2，但我有一个问题，这个布尔状态是否会存储在某个地方（本地存储，...）？那么它将处于全局状态，因为您的初始状态布尔值将从这个存储中设置

【讨论】：