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

Question

我从视图发送到操作 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 };
}

如您所见，我确实想修改 action 上的 appClasses，因为我必须使用新修改的 appClasses 来更新另一个 reducer 上的另一个状态。在这里，我想修改 appClasses 状态（在一个 reducer 中）并通过在函数调用 onother action dispatch(handleUpdateInitialSourceFetch(appClasses)) 中调度修改后的 appClasses； 我想修改另一个状态 selection.appClassesIds（在另一个处理用户选择的减速器中）：

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 状态放在一个大状态中，以便能够访问这两个状态，因为它们相互依赖？

Answer 1

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

然后你的 reducer 应该能够处理你的状态更新，然后通过订阅的组件传播。

Answer 2

我的意思是，“切换应用程序类”的适当负载不是应用程序类的完整列表，而是更接近于：

{ 
    type: types.TOGGLE_APP_CLASS, 
    payload: appClass.appClassId
}

状态修改应该在reducer中完成——明确的what reducers are for。

reducer 是一个纯函数，它接受前一个状态和一个动作，并返回下一个状态。

您正在尝试 (a) 直接在动作创建器中修改状态，以及 (b) 尝试在错误的位置修改状态。一旦你开始在正确的地方做事，解决这个问题就会容易得多。

在你的 reducer 中，你要么slice（如果这是一个数组）要么做一个对象克隆来更新单个切换并将状态设置为这个新的状态副本。但是你不直接改变状态；这样做会破坏 Redux 带来的很多东西（例如时间旅行）。