从redux-stored列表中删除项目并重定向回列表 - 延迟道具评估？

Question

我正在查看步骤列表.可以在"视图"屏幕内"查看"和"删除"每个步骤.我的StepDetails组件通过steps简单地从商店的一部分获取相应的步骤来绑定到redux商店steps.find(...):

const mapStateToProps = (state, ownProps) => {
  let stepId = ownProps.params.stepId;
  let step = state.steps.find(s => s.id === stepId);
  return {step};
};

现在,当(在"详细信息"中)我点击"删除步骤"时,我希望从商店中删除此步骤,并且我想导航到列表视图.

在删除时调用redux操作,返回新的步骤列表而不删除此步骤,然后调用重定向:

const deleteStep = (stepId) => {
  return dispatch => {
    return stepsApi.deleteStep(stepId).then(steps => {
      dispatch(action(STEPS_LIST_CHANGED, {steps}));
      // react-router-redux action to redirect
      dispatch(redirectToList());
    })
  }
};

这很好,做了我想要的,但有一个缺点:当STEPS_LIST_CHANGED调用action并从列表中删除step时,我的组件mapStateToProps在此重定向之前被调用.结果是mapStateToProps不能再明显找到这一步了,我的组件给了我错误,步骤是未定义的等等.

我能做的是检查提供给组件的步骤是否已定义,如果没有提供任何内容等等.但它是一种我不喜欢的防御性编程风格,因为我不希望我的组件知道该怎么做它得到错误的数据.

我还可以交换操作调度顺序:首先重定向然后改变状态,但是它也感觉不对(逻辑上你首先要删除然后重定向).

你如何处理这种情况？

编辑: 我最终得到的是将这个null/undefined-check放入容器组件(一个做redux接线的组件).通过这种方法,我不会用不必要的逻辑来混淆我的表达组件.它也可以被抽象出更高阶的组件(或者可能是ES7装饰器)来渲染null或者<div></div>当一些必需的道具不存在时.

Answer 1

我可以想到两种方法：

• 将委托列表更改为重定向？例如：

  dispatch(redirectToList(action(STEPS_LIST_CHANGED, {steps})));
  

• 处理空步骤组件以忽略渲染：

  shouldComponentUpdate: function() {
      return this.state.steps != null;
  }