如何为React / Redux抽认卡游戏设计状态流？

Question

这是我的第一个redux项目。 我正在尝试制作一款卡片游戏，教您平假名/片假名。 我陷入了某些状态流中...

游戏状态可视化

{
  // the current displayed card
  currentCard: null | {q: 'き', a: 'ki'},

  // time the game was started
  timestamp: millisecondTimestamp,

  // submitted answers
  answers: [
    {
      card: {q: 'か', a: 'ka'},
      answer: 'ka'
    },
    {
      card: {q: 'な', a: 'na'},
      answer: 'na'
    },
    ...
  ],

  // remaining cards in the deck
  deck: [
    {q: 'く', a: 'ku'},
    {q: 'け', a: 'ke'},
    {q: 'こ', a: 'ko'}
    ...
  ]
}

商店/ game.js

import {BEGIN_GAME, NEXT_CARD, SUBMIT_ANSWER} from '../actions/';
import {isEmpty, first, rest} from '../utilities/';

const gameReducer = (state=null, action) => {
  switch (action.type) {

    case BEGIN_GAME:
      return Object.assign({}, state, {deck: action.deck});

    case NEXT_CARD:
      return isEmpty(state.deck)
        ? Object.assign({}, state, {
          currentCard: null
        })
        : Object.assign({}, state, {
          currentCard: first(state.deck),
          deck: rest(state.deck)
        })
      ;

    case SUBMIT_ANSWER:
      return Object.assign({}, state, {
        currentCard: null,
        answers: state.answers.concat({
          card: state.currentCard,
          answer: action.answer
        })
      });

    default:
      return state;
  }
};

export default gameReducer;

动作/ index.js

import {shuffle} from '../utilities/';

export const BEGIN_GAME = 'BEGIN_GAME';
export const NEXT_CARD = 'NEXT_CARD';
export const SUBMIT_ANSWER = 'SUBMIT_ANSWER';

export const beginGame = deck => ({
  type: BEGIN_GAME,
  deck: shuffle(deck)
});

export const nextCard = () => ({
  type: NEXT_CARD
});

export const submitAnswer = answer => ({
  type: SUBMIT_ANSWER,
  answer
});

我认为游戏循环会像这样工作：

• 当state为null ，等待用户按下开始游戏按钮，该按钮将调度BEGIN_GAME动作
• 此时，开始主游戏循环
• 派送CHECK_END_GAME以确定卡牌中是否还剩下任何纸牌
• 派发NEXT_CARD以显示卡组中的下一张卡
• 等待单击答案，然后调度SUBMIT_ANSWER操作
• 记录答案后，从CHECK_END_GAME开始，然后是NEXT_CARD ，然后等待SUBMIT_ANSWER等，重复循环。
• 在某个时候， CHECK_END_GAME应该触发DISPLAY_RESULTS操作... ??

瞧，我在这里有点迷路了...使用redux，我不认为我可以（或应该）从商店内部调度另一个动作。 但是，我该如何分解这些动作或状态检查呢？

我的大脑目前正在思考这样的模型：

BEGIN_GAME(deck)

LOOP(
  CHECK_END_GAME()->NEXT_CARD()->SUBMIT_ANSWER(answer)->
)

DISPLAY_RESULTS()

问题是，我不知道如何链接这样的动作，甚至不建议这样做。 我愿意以完全不同的方式设计动作/存储。 我在这里是菜鸟，所以请告诉我我做错了什么。

任何朝着正确方向的推动都会有所帮助。 谢谢 ！

Answer 1

编写应用程序代码的一种方法是根据Petri Net Elements建模（或组织）游戏逻辑，并基于该组织编写代码（Chionglo，2014年）。 以下是根据Petri Nets组织的游戏逻辑（基于Flashcard游戏）的示例（“ How to Design”，2016）。 在这个游戏中有九张牌。 一次显示一张卡，然后玩家猜出该卡。 记录正确的猜想次数和错误的猜想次数，然后继续游戏直到没有更多的显示卡了。

图1（ 此回复的PDF版本 ）是游戏逻辑的交互式动态图； 它包括具有标准Petri Net表示法的卡片的“图形表示​​法”和一些Petri Net元素的高级表示法。 游戏逻辑的演示模式从卡组中随机选择一张牌，然后随机猜测该牌。

参考

J.Chionglo（2016）。 对“如何为React / Redux抽认卡游戏设计状态流？”的回复 在堆栈溢出。 堆栈溢出。 https://www.academia.edu/34059934/A_Reply_to_How_to_design_a_state_flow_for_a_react_redux_flashcard_game_at_Stack_Overflow 。

Chionglo，JF（2014）。 用于计算机编程的网络元素和注释：PDF中的计算和交互。 https://www.academia.edu/26906314/Net_Elements_and_Annotations_for_Computer_Programming_Computations_and_Interactions_in_PDF 。

“如何为react / redux抽认卡游戏设计状态流？”（2016年）。 堆栈交换。 于2016年2月7日在http://stackoverflow.com/questions/35220169/how-to-design-a-state-flow-for-a-react-redux-flashcard-game检索。

Answer 2

免责声明：这个答案会有点仓促，我要赶火车

目前，我仅“链接”异步操作，但我想同样的原理可能适用。

我不太了解这个游戏：P，但是怀疑您应该像这样多考虑一下：

BEGIN_GAME(deck)

DISPLAY_STATE
    {if END_GAME()}
        Its over!
    {else}
        <button onclick=dispatch( drawCardAndModifyStateAction )/>

在父级减速器中，您可以组成 （而不是链式）减速器：

const gameReducer = (state=null, action) => {
  switch (action.type) {
    NEXT_CARD: state.nextCard = nextCard(state);
  }
  state.checkEndGame = checkEndGame(state);
  return state;
}

您的nextCard “子”减速器做了一些工作...

const nextCard = (state=null, action) => {
  switch (action.type) {
    case NEXT_CARD:
        return Object.assign({}, state, {
          currentCard: first(state.deck),
          isEmpty: isEmpty(state.deck),
          deck: rest(state.deck)
        })
    }
  return state;
}

其次是checkEndGame

const checkEndGame = (state=null, action) => {
  switch (action.type) {
    default:
        return Object.assign({}, state, {
          message: ...,
          winner: ...,
        })
    }
}

您可能还会研究redux saga ， redux thunk等中间件。