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

Question

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

在牌面下方我有一个 "Next phase" 按钮，点击后应该先填充翻牌圈，然后在下一个点击添加转牌圈，再点击添加河牌圈

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;

我也为每个动作创建了这些：

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
    };
};

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

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

Answer 1

看看 redux-thunk 中间件。它允许您 dispatch 在一个动作创建器中根据需要执行任意数量的动作。所以这个想法是你有一个像

这样的动作创造者

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

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

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

The proper way to implement different actions within the same event in redux

javascript

reactjs

redux

react-redux