使用 Redux 翻转卡片状态——它应该是有状态的组件吗？答案

【问题标题】：Flipping card state with Redux - should it be stateful component?使用 Redux 翻转卡片状态——它应该是有状态的组件吗？
【发布时间】：2017-10-27 03:37:12
【问题描述】：

我有一个 JSON 文件，其中包含具有许多属性的对象，我想将它们显示在卡片网格上（我已经这样做了）。

现在我希望能够点击一张卡片并在点击的卡片上显示其他内容（但仍停留在网格视图中）> 基本上就像转动卡片以显示更多信息。

我应该通过向我的 JSON 对象添加一个额外的 isFlipped 布尔属性来做到这一点，以便我可以通过 Redux 操作更改它，还是应该创建一个有状态的卡片组件？最佳做法是什么？

【问题讨论】：

【解决方案1】：

为您的卡片创建一个展示组件，该组件接收一个 isFlipped 属性和一个 flipCard 函数。该组件可以根据给定的属性来确定要渲染的内容。如果 isFlipped 为真，则呈现其他信息。否则，渲染标准数据。在某些事件上，例如 onClick，调用 flipCard 函数。

然后通过将容器组件连接到状态、从商店的某些部分映射 isFlipped 并调度 FlipCard 操作来生成容器组件。如果可以翻转多张卡片，则需要将翻转的卡片映射到某种集合中，例如对象映射。如果一张卡片的钥匙存在于地图中，则该卡片将被视为翻转。

无论您的可翻转卡片需要在哪里渲染，都渲染容器。

【讨论】：

如果卡片的翻转状态不需要持久化，请将其保留在您的数据之外并使用状态来管理它。
谢谢，这个方法有效。我通过我的 redux 状态向下传递了一个 isFlipped 数组，该数组存储了已翻转卡片的所有 id。组件检查其 id 是否在此数组中并相应地显示卡片。 onClick 调用一个动作，通过推入其索引来更改 state.isFlipped 数组。