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

Question

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

我想让它可扩展，这样如果用户点击总价，它会展开（带动画）table 解释价格的构成。过于简单化一点，它会像下面这样：

< 22 trips a month -> use Ticket class A, it will cost 4 >
   |
   | user clicks on the web or taps on mobile
   |
   v
< 22 trips a month -> use Ticket class A, it will cost 4 >
  - trips 1-10 cost 0 ( each)
  - trips 11-20 cost 0 ( each)
  - trips 21-22 cost  ( each)

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

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

然后点击该行会产生动作，会被reducer处理，会修改state中的一些expanded键。
在组件内部，因为它是低级别的 UI 动画与业务逻辑甚至应用内导航无关。

然后点击将在组件内部处理，它们将 wrap/unwrap 例如通过设置 CSS class.
有什么不同吗？

您在应用程序中使用什么？像这种情况有一些标准模式吗？

Answer 1

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

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

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

然后创建一个 returns this.setState({ expanded: true )};

的 onClick 函数

我可能会这样处理。

Answer 2

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

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

Redux/ReactJS: Where should I store visual details of a state?

reactjs

react-native

redux

react-redux