Javascript Redux操作和共享验证

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

• 添加步骤请求
• 删除步骤请求
• 向上移动请求
• 移动\步下\请求

到目前为止还不错

现在，我有一个要求，即每当步骤顺序发生变化时（或当添加或删除步骤时），都要执行一种验证。在这个验证过程中，我需要检查每个步骤，看看它前面的步骤是否满足某些标准。如果没有，我不想拒绝更改。我只想在步骤上设置一个

isInvalid

标志，并最终更改步骤在UI中的外观

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

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

调用

---

有更好的方法处理这个问题吗？减速机只是一种功能。您可以使用另一个函数来包装它：

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

，则不需要

validateReducer

中的switch语句，因此它将变成：

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