减速器性能

Question

按照我的理解，当一个动作被调用时，所有的减速器都响应。如果action存在于reducer的switch case语句中，则执行action。如果没有，则执行case:default，保留现有状态。

当操作存在于reducer中，但它试图更新的特定属性不存在时，它似乎表现良好，因为没有什么可更新的。

例如，我有一个action creator，用于设置Modals的visible属性。每个模式都有自己的ID。我的代码如下所示：

export default (state = initialState, action) => {
   case types.SET_MODAL_IS_VISIBLE:
      return Object.assign({}, state,
         { modal22: action.value }
      )}

我在多个精简器中都有set_modal_is_visible，但是如果modal22没有在特定的精简器中定义，则不会发生任何事情，也不会出现错误。

现在，我有一个引发错误的场景。我有一个通用的日期选择器组件，我构建，可以作为一个单独的独立日期选择器使用，也可以“链接”到另一个。第二个场景非常有用，如果我需要用户给出两个日期，例如开始日期和结束日期。

我还构建了一个功能，如果日期选择器与另一个日期选择器耦合，当用户在第一个日期选择器中设置日期时，我会在第二个日期选择器中禁用该日期之前的所有日期，因为我不希望用户无意中选择一个在开始日期之前的结束日期。

我将我的日期选择器定义如下：

const initialState = {
    datePickers: {
        "startDatePicker": {
            activeDate: "8/25/2017",
            disabledBefore: "",
            linkedTo: "endDatePicker"
         },
         "endDatePicker": {
            activeDate: "",
            disabledBefore: "8/25/2017" // This date is set when the user sets the active date in startDatePicker
            linkedTo: ""
       }
    }
}

这个场景有点有趣，因为我的reducer中一个属性的状态更改会触发另一个属性的状态更改。这并不难做到，我有一种方法来控制当我做更新。

设置禁用日期的操作如下所示：

...
case types.SET_DISABLED_DATES:
    return Object.assign({}, state,
       datePickers: Object.assign({}, state.datePickers, {
          datePickers[action.datePickerId]: Object.assign({}, state.datePickers[action.datePickerId], {
             disabledBefore: action.value
          })
    })

请记住，我可以并且应该能够在之前设置disabled，即使日期选择器是作为一个独立的选择器使用的。因此，我需要在每个reducer中添加set_disabled_dates。

我遇到的问题是，每当调用set_disabled_dates时，在将日期选择器用作单个/独立的日期选择器的简化器中都会出现错误，因为在简化器中没有定义日期选择器对的日期选择器Id。

例如，在ProjectsReducer中，我可以将日期选择器作为一对数据选择器的一部分使用，这样就可以定义StartDatePicker和EndDatePicker并且一切正常。

但是，我可能在TasksReducer中使用了单个实例日期选择器，该选择器也响应set_disabled_dates调用，但它失败了，因为它找不到enddatePicker。在此方案中，TasksReducer响应我在ProjectSReducer中设置EndDatePicker的DisabledDates属性的调用。

我已经提出了两个关于这个问题的问题，我在这里看到的唯一真正的解决方案是，我需要在减速器中有一个类似于这样的条件：

...
case types.SET_DISABLED_DATES:
   if(typeof state.datePickers[action.datePickerId] !== "undefined") { // Making sure that what I'm trying to update exists in the reducer
      return Object.assign({}, state,
       datePickers: Object.assign({}, state.datePickers, {
          datePickers[action.datePickerId]: Object.assign({}, state.datePickers[action.datePickerId], {
             disabledBefore: action.value
          })
    })
   } else {
      return state;
   }

诚然，这看起来有点像胡说八道，但我真的不能在这里提出另一个解决方案。

同样，问题是，只要所有的简化程序都响应set_disabled_dates，就可以保证某个特定的日期选择器不会存在，并且object.assign()将抛出一个错误。

有什么建议吗？减速机中的简单条件是这里要走的路吗？是个小木棍吗？

附言。我尝试了这段代码，它工作得很好，并修复了这个问题。一方面，我觉得这有点反模式，但另一方面，在试图更新它之前，确保我想在reducer中更新的属性存在似乎是一个好主意。我很感激你对此的反馈。谢了。




Answer 1

您只是在设置状态之前在reducer中进行基本验证。完全没问题。我不认为检查操作创建者中的存储以防止对不在存储中的对象分配操作是一个好的做法（无论如何，您将如何做到这一点！）。

我不明白的是，一个datepicker如何链接到另一个不在商店中的datepicker？也许在组件的didmount和willunmount上分派一个create和teardown操作？

我不知道你的全部要求，但我想我们可以让它简单得多。我会做这样的事情：

商店：

{
  datePickers: {
    id1: {
      value: '',
      minValue: '',
      maxValue: '',
    },
    id2: {
      value: '',
      minValue: '',
      maxValue: '',
    }
  }
}

现在，除非您正在创建某种耦合的datepicker组件，这些组件总是成对运行，否则我认为最干净的方法是在父组件的MapDispactChtoProps函数中的链接datepicker中设置禁用值。

在这里，您将为组件设置IDs，并且您确切地知道应该在另一个组件之前禁用哪个组件。

dispatch => ({
  setArrivalDate(value) {
    dispatch(datePickerActions.setValue(arrivalDateId, value);
    dispatch(datePickerActions.setMaxValue(depatureDateId, value);
  },
  setDepatureDate(value) {
    dispatch(datePickerActions.setValue(depatureDateId, value);
    dispatch(datePickerActions.setMinValue(arrivalDateId, value);
  }
})