在 redux 中访问 action 中的状态

Question

许多链接和教程建议将 action creators 中的逻辑分组，以简化 reducer 逻辑。

想象一个简单的（标准化）状态：

const initialState = {
  parent: {
    allIds: [0],
    byId: {
      0: {
        parentProperty: `I'm the parent`,
        children: [1, 2]
      }
    }
  },
  children: {
    allIds: [1, 2],
    byId: {
      1: {
        childrenProperty: `I'm the children`
      },
      2: {
        childrenProperty: `I'm the children`
      }
    }
  }
}

我现在要删除父级。由于只有父母指的是孩子，所以我也会删除孩子。

我想像这样的动作创建者：

function deleteParents(parentId) {
  return {type: 'DELETE_PARENT', payload: {parentId}};
}

和

function deleteChild(childId) {
   return {type: 'DELETE_CHILD', payload: {childId}};
}

现在，为了处理这种情况，我做了这样的事情（使用 redux-thunk）

function deleteParentAndChildren(parentId) {
  return (dispatch, getState) {
    const childrenIds = myChildrenSelector(getState(), parentId);
    const deleteChildrenActions = childrenIds.map(deleteChild);
    const deleteParentAndChildrenAction = batchActions([
      deleteParents(parentId),
      ...deleteChildrenActions
    ], 'DELETE_PARENT_AND_CHILDREN');
    dispatch(deleteParentAndChildrenAction);
  }
}

这样，我将小动作组合成大动作，而reducer逻辑非常简单，因为它只包含删除对象中的一个键。

相反，我不喜欢使用 redux-thunk（用于异步操作）来获取状态（这被认为是反模式）。

你们是如何处理这类问题的？ 像 redux-sage 这样的工具有帮助吗？

Answer 1

您似乎遇到的问题似乎相当普遍，如果您的应用程序有点复杂，我建议使用redux-orm，这有点难以理解然后集成，但是一旦设置它只是抽象您所有的困难关系工作您的实体之间。

Answer 2

我在这里有不同的看法。我这样做的方式是，我会在删除父级时删除子级，但不会调度 child_delete 操作。当您在 reducer 中删除父级时创建新状态时，您可以访问该父级引用的子级，并从状态中删除这些子级。

此外，如果您仍想单独调度操作，您可以将子 ID 从组件传递到操作。通过该操作，您可以分派两个不同的操作，删除父 ID 和子 ID。

----------- 编辑 -------

// The initial application state
const initialState = {
  parent: {
    allIds: [0],
    byId: {
      0: {
        parentProperty: `I'm the parent`,
        children: [1, 2]
      }
    }
  },
  children: {
    allIds: [1, 2],
    byId: {
      1: {
        childrenProperty: `I'm the children`
      },
      2: {
        childrenProperty: `I'm the children`
      }
    }
  }
}

export default function batchManagement(state = initialState, action) {
  switch (action.type) {
    case 'DELETE_PARENT':  //assuming action.deleteParents = [0]
      //Here you have access to state, so you can change parents and children as well, and create a totally new state
    case 'DELETE_CHILDREN':
      //Return a new object for state
    default:
      return state;
  }
}