ReactJS -道具与状态+商店设计

Question

想象一下:您正在编写一个“智能家居”应用程序，该应用程序可以管理您房子内的温度。

在我看来我想：

• 见每个房间的当前温度
• 为每个房间设定所需的温度
• 查看每个房间是否打开/关闭空调

有一个外部设备，通过websockets与您的应用程序通信(它定期发送当前温度、空调状态)。

我在那里看到两种选择：

1)创建一个包含数据结构的“大”存储，如：

var _data = [
   name: 'Kitchen',
   currentTemperature: 25,
   desiredTemperature: 22,
   sensors: [
       {
           name: 'Air Conditioning'
           state: 'on'
       }
       ... there might be other sensors too ...
   ]
]

将有一个TemperatureManager组件(或类似的组件)。它会有一个状态，并定期从Store获取它。然后，它只会将州的一部分分发给他的后代(即RoomTemperatureManager，RoomSystemSensorManager)，并将其作为道具传递。

如果有任何变化(例如，卧室的温度)，它将从存储中获取所有数据，并在必要时重新呈现其后代。

2)第二个解决方案是

使RoomTemperatureManagers和RoomSystemSensorManagers有自己的状态。它也与温度和SystemSensorState的独立存储有关。

然后，这些存储将有参数化的getter(即getSensorState(roomName))，而不是获取所有数据的方法。

问题：

哪种选择更好？

附加问题：

叶组件(即负责管理所需温度的组件)直接调用ActionCreator可以吗？或者也许只有监督部门应该了解ActionCreator，并将适当的方法作为一种财产传递给他的后代？

Answer 1

你在帖子中描述的两个选项实际上是两个不同的问题：

1. 一家大商店还是几家不同的商店？
2. 子组件(RoomTemperatureManagers)是否应该有自己的状态或从商店接收道具？

广告1.一家大商店更容易，只要它不变得复杂。我使用的经验法则:如果您的商店有> 300行代码，那么最好在不同的商店中分开。

广告2.道具一般比国家好。但在你的情况下，我认为你需要状态，例如你的温度管理器:你设定了你的应用程序的温度(并且希望看到它反映在一些滑块或其他东西中)。为此，您将需要状态。

• 状态立即更新前端(乐观更新)。
• 然后，组件将set_temparature动作发送到房子中的传感器。
• 然后，房子里的传感器确认它为你的应用程序设置了新的温度。
• 存储更新并发出更改。
• 房子里的感应器的温度设置作为道具传达给你的温度经理。
• 温度管理器可以做它需要做的任何事情(只要用新的支柱更新状态，显示确认信息，或者如果通信链上的事情发生故障，就会发出很好的错误消息)。

Answer 2

我认为最好的办法是授权。您的TemperatureManager应该有一种机制，通知侦听器有更新，然后Room(Temperature|System)Manager将作为侦听器发送一个回调，该回调将使用更新的数据并相应地更改状态。这将利用虚拟DOM diff，因此只显示更改，而不是重新呈现整个部件，并创建与Store通信的单个点。只有在需要对其所使用的模型进行更新的情况下，Room(Temperature|System)Manager才应该与商店进行通信。

如果在订阅时，可以指定要侦听哪些数据进行更新，则可以改进TemperatureManager。它不应该假设一个特定的‘经理’应该得到任何子集的数据。