javascript - Redux 操作和共享验证

Question

我的 redux 存储中有一组步骤。我的 my steps reducer 通过处理一系列操作来操纵步骤列表:

• ADD_STEP_REQUEST
• REMOVE_STEP_REQUEST
• MOVE_STEP_UP_REQUEST
• MOVE_STEP_DOWN_REQUEST

到目前为止一切顺利。

我现在需要在每次更改步骤顺序(或添加或删除步骤时)时执行一种验证。在此验证期间，我需要检查每个步骤以查看它之前的步骤是否满足特定条件。如果没有，我不想拒绝更改。我只想在步骤上设置一个 isInvalid 标志，并最终更改步骤在 UI 中的显示方式。

我能处理这个问题的最简单方法是添加一个 validateOrder() 函数(应用标志并返回步骤)，该函数在每个 case 语句末尾由 reducer 运行:

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);
}

但是，这感觉不对，因为我需要在所有 case 语句中重复调用 validateOrder。

有没有更好的方法来处理这个问题？

Answer 1

reducer 只是一个函数。你可以用另一个函数包装它:

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)
  }
}

现在你把责任分开了。原始 reducer 不需要关心验证。 validatedReducer 会处理这个问题。

如果validateOrder必须应用于所有情况，那么您就不需要validatedReducer中的switch语句，所以它会变成:

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