javascript - 在 redux 中的同一事件中实现不同操作的正确方法

Question

我正在尝试通过 React 学习 Redux，所以我正在开发一个简单的扑克游戏(德州扑克)，我有一个翻牌，翻牌由 3 张牌组成，转牌(1 张牌)和河牌(1卡)

在棋盘下方我有一个“下一阶段”按钮，点击后应该先填充翻牌圈，然后在下一个点击添加转牌圈，再点击添加河牌

import React, {PropTypes} from 'react';

const PhaseButton = ({onClick}) => {

    return (
        <div id="phaseButtonContainer">
            <button onClick={onClick}>Next phase</button>
        </div>
    );

};

PhaseButton.propTypes = {
    onClick: PropTypes.func.isRequired
};

export default PhaseButton;

我也为每个 Action 创建了这些:

const addFlop = (cards) => {
    return {
        type: 'ADD_FLOP',
        cards: cards
    };
};

const addTurn = (card) => {
    return {
        type: 'ADD_TURN',
        card: card
    };
};

const addRiver = (card) => {
    return {
        type: 'ADD_RIVER',
        card: card
    };
};

卡片由另一项随机挑选的服务提供。

问题是:选择卡片/卡片和决定使用哪个 Action 的逻辑应该放在哪里？这非常复杂，因为在同一个按钮中会发生不同的操作，而且我还必须读取状态才能知道要执行哪个阶段

Answer 1

看看redux-thunk中间件。它允许您在一个 Action 创建器中调度尽可能多的 Action 。所以这个想法是你有一个像

nextPhase = (cards) => {
  return dispatch => {
    // some logic
    dispatch(addFlop(cards));
    // more logic
    dispatch(addTurn(cards));
    // more logic
    dispatch(addRiver(cards));
  };
}

并且您可以根据您的逻辑调度不同的操作。它们也可以是异步的。