Redux状态：动作还是选择器？

Question

状态由一个随机创建数字数组（+ 0）的函数补充，如下所示：

[[3,0]，[6,0]，[8,0]，[2,0] .....]

这就是应用程序的状态。 [3,0]是包含数字3并且不可见的图块的示例（0）一旦我点击图块，它就会调度一个动作并且相应元素的0变为1并且基于该图块显示未显示数字（3）

因此，如果我点击第一个图块，状态将变为： [[3,1]，[6,0]，[8,0]，[2,0] ......]

现在，我想添加以下内容：

• 随时跟踪有多少个瓷砖未被覆盖（即有1​​个作为第二个元素）。

• 将未覆盖的瓷砖数量限制为2（如果第二个瓷砖的编号与第一个瓷砖的编号不匹配，则会再次覆盖 - 许多记忆游戏具有相似的功能）

• 如果我发现一个瓷砖然后第二个并且数字匹配，我希望它们永久不被发现，我们会在分数上加+1。

我应该将它设计为主要状态的不同部分（使用不同的reducer然后使用combineReducers）？或者我应该重新设计州的第一部分，如下所示：

initialState = {
  grid: [[3,0], [4,0],...],
  score: 0,
  number_of_uncovered_tiles: 0
}

现在要改变得分和number_of_uncovered_tiles的值 - 我是否更正我不应该使用动作而是选择器，因为两者都将根据网格数组元素值的状态自动计算？

Answer 1

通常建议尽可能保持您的状态平坦，避免由单个reducer操作的深层嵌套层次结构。

在你的情况下，我会拆分grid reducer和uncoveredTiles reducer。这样可以更好地控制揭开瓷砖，而无需一遍又一遍地遍历瓷砖阵列。

{
  grid: [ 3, 4, 9, ...],
  score: 0,
  uncoveredTiles: [ 0, 2 ],
}

这样，在打开两个切片时关闭切片只需要更新grid[uncoveredTiles[0]]和grid[uncoveredTiles[1]]并将uncoveredTiles重置为[]。

如果您的磁贴数据会变得更复杂（例如，您将与图像交换数字），只有grid缩减器必须更改，而uncoveredTiles将保持不变。

另外，我会考虑为scores引入单独的reducer，以免在一个地方混淆不同的逻辑问题。