Question

我的redux商店中有一系列步骤。我的步骤 reducer通过处理一系列操作来操作步骤列表：

ADD_STEP_REQUEST
REMOVE_STEP_REQUEST
MOVE_STEP_UP_REQUEST
MOVE_STEP_DOWN_REQUEST

到目前为止一切顺利。

我现在需要在每次更改步骤顺序时（或添加或删除步骤时）执行某种验证。在此验证过程中，我需要检查每个步骤，看看它之前的步骤是否符合某些标准。如果没有，我不想拒绝这些改变。我只想在步骤上设置isInvalid标志，并最终改变步骤在UI中的显示方式。

我可以处理的最简单方法是在每个case语句的末尾添加一个由reducer运行的validateOrder（）函数（应用标志并返回步骤）：

case ADD_STEP_REQUEST: {
  const amendedSteps = // add a step
  return validateOrder(amendedSteps);
}

case REMOVE_STEP_REQUEST: {
  const amendedSteps = // remove a step
  return validateOrder(amendedSteps);
}

case MOVE_STEP_UP_REQUEST: {
  const amendedSteps = // reorder steps
  return validateOrder(amendedSteps);
}

case MOVE_STEP_DOWN_REQUEST: {
  const amendedSteps = // reorder steps
  return validateOrder(amendedSteps);
}

然而，这感觉不对，因为我需要在所有案例陈述中重复validateOrder调用。

有更好的方法来解决这个问题吗？

Answer 1

减速器只是一个功能。你可以用另一个函数包装它：

const yourReducer = (state = 'your initial state', action) => {
  switch (action.type) {
    case ADD_STEP_REQUEST:
      // ...
      return amendedSteps

    case ...
  }
}

const validatedReducer = (state, action) => {
  switch (action.type) {
    case ADD_STEP_REQUEST:
    case REMOVE_STEP_REQUEST:
    case MOVE_STEP_UP_REQUEST:
    case MOVE_STEP_DOWN_REQUEST:
      return validateOrder(yourReducer(state, action))

    default:
      return yourReducer(state, action)
  }
}

现在你分开了责任。原来的减速机不需要关心验证。 validatedReducer会照顾到这一点。

如果validateOrder必须适用于所有情况，那么您不需要validatedReducer中的switch语句，因此它将变为：

const validatedReducer = (state, action) =>
  validateOrder(yourReducer(state, action))

Redux操作和共享验证

1 个答案: