Redux：异步执行reducer吗？

Question

我正在研究保龄球计分系统，对于以下原因为何无法按预期工作感到非常困惑。

我的状态可能看起来像这样：

players: [
  {
    "id": "f44t0uagdyg",
    "name": "test-player",
    "currentFrame": 1,
    "active": false,
    "rolls": {
      "0": [2,3],
      "1": [1,5],
      "2": [],
      "3": [],
      "4": [],
      "5": [],
      "6": [],
      "7": [],
      "8": [],
      "9": [],
      "10": []
    },
    "totalWins": 0
  },
  {
    "id": "5gbxlu94zpr",
    "name": "test-player-2",
    "currentFrame": 1,
    "active": false,
    "rolls": {
      "1": [1,6],
      "2": [],
      "3": [],
      "4": [],
      "5": [],
      "6": [],
      "7": [],
      "8": [],
      "9": [],
      "10": []
    },
    "totalWins": 0
  }
]

[现在，每当用户输入新纸卷时，我都希望将其与这些reducers一起添加到商店中（它们可以按预期工作）：要将卷添加到状态，请执行以下操作：

    case ADD_ROLL:
      return {
      ...state,
      players: state.players.map((player) => {
        if (player.id === action.id) {
          return {
            ...player,
            rolls: {
              ...player.rolls,
              [action.frame]: [
                ...player.rolls[action.frame],
                action.roll
              ]
            }
          }
        }
        return player;
      })
    };

要前进到下一帧（例如，在用户输入2滚动或敲击之后，我执行此操作：

       case NEXT_FRAME:
          return {
          ...state,
          players: state.players.map((player) => {
            if (player.id === action.id) {
              return {
                ...player,
                currentFrame: player.currentFrame + 1,
              }
            }
            return player;
          })
        }

在用户单击以确认其输入后，将调用此advanceGame函数来评估游戏是否应前进到下一帧（如果用户已经滚动两次）：

export const advanceGame = (players, roll) => {
  let currentPlayer = 0;
  const { currentFrame } = players[currentPlayer];

  if (players[currentPlayer].rolls[currentFrame].length === 2) {
    store.dispatch(nextFrame(players[currentPlayer].id));
    store.dispatch(addRoll(players[currentPlayer].currentFrame, roll, players[currentPlayer].id));
  } else {
    store.dispatch(addRoll(players[currentPlayer].currentFrame, roll, players[currentPlayer].id));
  }
};

我想发生的事情是，如果用户已经滚动两次，store.dispatch(nextFrame)会将currentFrame更新为下一个，然后[[then将分数添加到适当的帧。但是，当前只有在完成3卷并在roll数组中包含3个项目之后，帧才会前进。

如何确保ADD_ROLL仅在“ C0”完成后才执行？

我已经盯着很长时间了，如果我的问题很冗长，我深表歉意。很高兴将其清除并感谢您的任何帮助！

Answer 1

我不知道这是否正是您想要的，但我认为减速器总是同步的。

也许您可以尝试使动作异步。Redux-thunk是为NEXT_FRAME

例如，您可以调度一个执行api调用的操作，而第二个操作仅在api返回其响应后才被调用。

您应该找到花费时间来执行并将其放置在thunk中的代码，并且仅调用reducer来更新您的状态。