javascript - Redux在到达 reducer 之前检测到状态突变

我正在从视图发送一个动作this.props.appClasses
这是视图：

 <div key={key} className='SDWanAppClassTreeItem' onClick={this.props.actions.handleToggleAppClass.bind(this,this.props.appClasses, 0, key)}>

在我修改从视图中获得的appClasses的操作中，我想将修改后的appClasses发送到reducer以更新appClasses状态。但这在到达减速器之前给了我一个错误。


  检测到状态突变
  这是动作：

export function handleToggleAppClass(appClasses, parentAppClassId, appClassId) {
  // console.log('handleToggleAppClass', appClassId, this.appClasses[appClassId]);

  if (appClass.parentAppClassId == 0) {
    // Flip the appClass Show Property
    appClasses[appClass.appClassId].show = appClasses[appClass.appClassId].show ? false : true;

    if (Object.keys(appClasses[appClass.appClassId].children).length !== 0) {
      // Regardless if we enable or disabled the parent, all children should be disabled
      for (var childKey in appClasses[appClass.appClassId].children) {
        appClasses[appClass.appClassId].children[childKey].show = false;
      }
    }
  } else {
    // If we are enabling a child, make sure parent is disabled
    if (!appClasses[appClass.parentAppClassId].children[appClass.appClassId].show) {
      appClasses[appClass.parentAppClassId].show = false;
    }
    appClasses[appClass.parentAppClassId].children[appClass.appClassId].show = appClasses[appClass.parentAppClassId].children[appClass.appClassId].show ? false : true;
  }

  dispatch(handleUpdateInitialSourceFetch(appClasses));

  return { type: types.TOGGLE_APP_CLASS, appClasses };
}

如您所见，我确实想在操作上修改appClasses，因为我必须使用新修改的appClasses来更新另一个reducer上的另一个状态。在这里，我想修改appClasses的状态（在一个reducer中），并通过在其他操作dispatch（handleUpdateInitialSourceFetch（appClasses））的函数调用中分派修改后的appClasses；
我想修改另一个状态selection.appClassesIds（在另一个处理用户选择的reducer中）：

const selection = {
  timespan: "-3660",
  direction: 0,
  appClassIds: []
};


export function updateAppClassesIds(appClasses) {
  var appClassIds = [];
  for (var key in appClasses) {
    if (appClasses[key].show) appClassIds.push(key);
    if (Object.keys(appClasses[key].children).length !== 0) {
      // Regardless if we enable or disabled the parent, all children should be disabled
      for (var childKey in appClasses[key].children) {
        if (appClasses[key].children[childKey].show) appClassIds.push(childKey);
      }
    }
  }

  return { type: types.UPDATE_APP_CLASSES_IDS, appClassIds };
}

如何将appClasses变量从视图发送到操作，而不会出现该错误。
还是应该将selection和appClasses状态置于一个大状态中，以便因为这两个状态相互依赖而能够访问这两个状态？

最佳答案

您可以通过创建一个操作来接收要修改的appClass的ID和新值（true / false）来实现此目的。

然后，Reducer应该能够处理对您的状态的更新，然后通过订阅的组件进行传播。

关于javascript - Redux在到达 reducer 之前检测到状态突变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41875643/