使用Redux处理全局命令的好方法？

Question

我有一个React / Redux应用程序，其中有许多可以通过上下文菜单，快捷方式或单击按钮以各种方式调用的全局命令。

然后在与命令相关的位置处理这些命令（例如，如果命令是“save”，则由文本编辑器组件处理）。

到目前为止，我已经以一种错综复杂的方式做到了这一点：

• 我发送一个“COMMAND_EXEC”动作，如下所示：{ type: "COMMAND_EXEC", name: "save_note" }，在reducer中填充状态属性“current_command”
• 然后在组件中将此current_command状态属性映射到prop
• 最后在componentWillReceiveProps，我检查是否有“current_command”属性并处理它。
• 处理完毕后，我使用不同的Redux操作清除命令“COMMAND_CLEAR”

它有点有效，但它过于复杂，我怀疑它可能会导致问题，因为有越来越多的组件和命令。我想我正在使用Redux操作作为事件，这可能不是一个好主意。

所以我想知道是否有更合适的方法来处理Redux中的这类事件？

Answer 1

答案取决于预期这些命令的作用：

1. 这些命令是否正在进行非常严格依赖于组件状态的UI更新？

2. 这些命令是在api通话/导航到其他路线等吗？

案例（2）

View（React Component）不应该是执行此命令的理想位置。相反，您应该将该命令作为操作执行。文本编辑器组件应该调度由redux处理的操作“save”。任何其他XYZ组件也可以调用相同的“保存”操作。如果操作需要text-component的当前状态，则应该在reducer中保持此状态。

案例（1） - UI更新

除非需要，否则将UI状态保留在reducer中并不是一个好主意。但有时，你需要这样做。请参阅以下示例：

您有一个“关闭”和“开启”的开关，testSlice = append(testSlice, Row{/*...*/})组件应该是保持自己的Switch的理想位置。更新后，它会通过state.isOn让其父母知道。

现在，如果外部动作想要翻转开关怎么办？最好的方法是将this.props.onUpdate组件的state提升到父级别，让父级处理Switch组件的所有内容。

阅读：Lifting State Up - React

同样，您可以将UI组件的“状态”提升为reducer，并允许操作修改redux存储的状态。 View组件只会监听商店更新并相应地重新渲染。

你应该做的是：

• React组件管理自己的状态
• 其状态也可以通过使用Switch
监听的外部命令进行更改

这将使应用程序变得混乱且难以管理。

可能的解决方案：

• 操作应该是实际执行全局命令的地方
• Reducers应该是保持执行这些全局命令所需的应用程序状态的地方
• 可以从应用程序的任何位置调度这些全局操作
• 这些全局操作的结果将再次存储在缩减器中，UI组件将监听并自行更新。