javascript - 在 Redux 中一次添加多个连接对象

Question

假设您有两个对象要存储在 Redux 中，A 和 B，它们根据 redux docs 进行了非规范化。 ，像这样:

state = {
  a: { byId: { id: { obj } }, allIds: [] },
  b: { byId: { id: { obj } }, allIds: [] }
};

您有一个操作 CREATE_A，它向商店添加了一个新的 A。 但是，对于每个创建的A，它本质上也需要一个B。假设 A 和 B 在单独的 reducer 切片中(即 combineReducers)并且不能合并为一个。

B 的 reducer 对 CREATE_A 事件使用react并创建一个新的 B 很容易，但是如果 B 对象需要刚刚创建的 A 的 ID？

即使有 join table涉及加入B到A，仍然存在“知道第一个创建的A”的问题。我想出的解决方案是像这样存储最后创建的 A:

a: { lastCreated: {}, byId: etc, allIds: etc }

然后将整个状态树传递给 B 的化简器或连接表化简器，这样它就可以访问 state.a.lastCreated。但是，仅仅拥有一个键以便后来的 reducer 知道发生了什么感觉是不对的(reducer 需要特定顺序的想法似乎也是错误的)

我认为您还可以使用新的 A 的 id 发送 CREATE_B，但这必须在异步操作中完成(因为您不能从 reducer 调度)，这也感觉不对。

在程序世界中，这将是微不足道的:

a = createA();
createB(a);

但即使有两次调度，我也不确定它会如何工作:

dispatch( createA() )
dispatch( createB(???) )

处理“A-inherently-means-B-as-well”这种情况的最佳方法是什么？

编辑:让我尝试使用一些更具体的例子。

假设您有正方形和点。创建一个正方形本质上意味着创建 4 个点。这些点与正方形相连，因为它们形成正方形，但它们也不属于正方形，因为它们可以是独立的对象:

所以，ADD_SQUARE 需要同时添加一个正方形，添加 4 个点，然后将两者连接在一起，我不确定如果不直接在父级中编写 reducer，该怎么做像这样的“状态”(我不想必须这样做，它很快就会变得非常困惑，想象一下必须对 3-8 边形的多边形重复):

function reducer(state, action) {
    switch(state) {
    case ADD_SQUARE:
        const points = create4Points();
        const square = createSquare();
        return {
            ...state,
            squares: {
                ...state.squares,
                byId: {
                    ...state.squares.byId
                    [square.id]: square
                }
            },
            points: {
                ...state.points,
                byId: {
                    ...state.points.byId,
                    [point[0].id]: point[0],
                    [point[1].id]: point[1],
                    [point[2].id]: point[2],
                    [point[3].id]: point[3]
                }
            },
            pointsSquares: {
                ...state.pointsSquares,
                byId: {
                    [square.id]: {
                        square: square.id,
                        points: [point1.id, point2.id, point3.id, point4.id]
                    }
                }
            }
        };
    }
}

Answer 1

您可以在 A 和 B reducer 中定义相同的操作。像这样 --

function reducerA(state, action) {
  switch(action.type) {
    case A_CREATE:
         do A stuff
  }
}


function reducerB(state, action) {
  switch(action.type) {
    case A_CREATE:
       do B stuff
  }
}

然后，当您分派(dispatch) action 时，它将影响两个 reducer。

function createA({id, stuff, etc}) {
  return {
    type: "A_CREATE",
    payload: {id, stuff, etc}
  }
}

然后您可以将 id 绑定(bind)到您需要创建的任何内容...从而将它们“连接”在一起。

编辑:

您可以将 redux thunk 或一些其他中间件(如 redux saga)与 promises 结合使用以分派(dispatch)多个操作。

 `
  function handleACreation(payload) {
   dispatch(
      createA(payload)
       .then(result => dispatch(updateB(result)))
   )
  }
 `

显然，确切的代码是行不通的 - 但总体思路仍然存在:]希望这有帮助!