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

时间:2017-08-25 04:47:15

标签: reactjs redux react-redux

我们如何处理一个属性状态的变化影响另一个属性的状态?

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

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

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

每个日期选择器都是我的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: ""
   }
}

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

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

问题是每当我使用“链接”实例并尝试设置第二个日期选择器的禁用日期时,用于设置日期的操作会在减少器中创建一个问题,而日期选择器没有链接。由于所有reducers都响应相同的操作,因此具有独立日期选择器实例的reducer仍会响应该操作并尝试设置不存在的日期选择器的禁用日期。

我有一个想法是在减速机中使用一个条件,但我觉得这是一个坏主意。这是我问这个问题的地方,我同意答案。 Conditions in reducers

1 个答案:

答案 0 :(得分:1)

我相信您可以通过某种方式在商店中唯一标识日期选择器。

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

这样我可以从我的动作创建者发送两个动作(我正在考虑Redux Observable,但我相信Redux Thunk也可以):一个更新这个datepicker,另一个更新链接的datepicker。

那就是让商店完成更新datepicker的任务,而不用担心逻辑。