处理影响另一个状态的一个属性

Question

我们如何处理一个属性状态的变化会影响另一个属性状态的情况？

这是可能有助于澄清我正在尝试解决的问题的实际场景。

我有一个通用的日期选择器组件，它可以用作完全独立的组件，也可以“链接”到另一个日期选择器实例。

每当我需要用户设置两个日期时，我都会使用这种“链接”方法，例如开始和结束日期。这个想法是，当用户设置开始日期时，我想禁用用户刚刚在第二个日期选择器中设置的开始日期之前的所有日期。这样，用户就不会意外设置早于开始日期的结束日期。

每个日期选择器都是我的 reducer 中的一个对象，具有一些属性。所以它看起来像这样：

datePickers: {
   "startDatePicker": {
      activeDate: "8/24/2017",
      disableBefore: "",
      disableAfter: ""
   },
   "endDatePicker": {
      activeDate: "8/25/2017",
      disableBefore: "8/24/2017", // Notice that the disableBefore is set to the active date in startDatePicker
      disableAfter: ""
   }
}

在对象中设置属性值很容易，但我遇到了一个有趣的问题。

正如我所说，我的日期选择器可以用作单个独立的日期选择器，在这种情况下，我们不会设置另一个日期选择器实例的禁用日期。

问题是每当我使用“链接”实例并尝试设置第二个日期选择器的禁用日期时，用于设置日期的操作会在具有未链接日期选择器的减速器中产生问题。因为所有 reducer 都响应相同的操作，所以具有独立日期选择器实例的 reducer 仍会响应该操作并尝试设置不存在的日期选择器的禁用日期。

我的一个想法是在减速器中使用条件，但我确实觉得这是个坏主意。这是我提出问题的地方，我同意答案。 Conditions in reducers

Answer 1

我相信您有一些方法可以唯一地识别商店中的日期选择器。

我要做的是更新日期选择器的操作还有一个字段，用于标识此日期选择器链接到的其他日期选择器。

这样我可以从我的动作创建者那里分派两个动作（我在想 Redux Observable，但我相信 Redux Thunk 也是可能的）：一个更新这个日期选择器，另一个更新链接的日期选择器。

这只会让商店负责更新日期选择器，而不用担心逻辑。