减速器上的复杂状态修改

时间:2017-01-26 18:33:08

标签: javascript reactjs redux react-redux

我从视图发送到一个动作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中的状态。我想这样做是因为我读到减速器应该很简单,你在动作中看到的修改很复杂。我可以在减速机中进行这种复杂的修改吗?因为这是给我一个错误,因为我发送this.props.appClasses。如果我在reducer上执行此操作,则不必发送appClasses,因为它位于reducer的状态。

所以在一行中,我可以在reducer上进行这些复杂的修改而不是在动作上进行修改吗?

1 个答案:

答案 0 :(得分:0)

您可以创建一个计算新appClasses状态的函数,并调度在每个操作中发送此新状态的两个操作。 然后使用redux-thunk中间件自行调度此函数。

看起来像这样:

static

您可以在此处了解详情: http://jamesknelson.com/can-i-dispatch-multiple-actions-from-redux-action-creators/