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].....]

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

我应该将其设计为主状态的不同部分（使用不同的 reducer，然后使用 combineReducers）吗？或者我应该重新设计状态的第一部分以将其包含如下：

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

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

Answer 1

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

在你的情况下，我会拆分 grid reducer 和 uncoveredTiles reducer。这将使您更好地控制揭开图块，而无需一遍又一遍地运行遍历图块阵列。

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

这种方式在打开两个磁贴时关闭磁贴只是更新 grid[uncoveredTiles[0]] 和 grid[uncoveredTiles[1]] 并将 uncoveredTiles 重置为 [] 的问题。

如果您的图块数据变得更复杂（例如，您将用图像交换数字），只有 grid reducer 需要更改，而 uncoveredTiles 将保持不变。

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

Redux state: action or selector?