Question

我正在研究板球得分单页应用程序中的反应。

正在使用Redux来维护其数据，并且每次操作我都将获得一个新的状态。

我的应用有单根rootReducer，因为一切都混杂在一起。如果投球，双方击球和保龄球都会更新。

州很复杂，但我认为它应该是这样的。

请告诉我这个州的设计是否合适，或者我应该以某种方式简化或改变它？

var playerType = {
    id:             0,
    name:           '',

    // Batting stats
    runs:           0,
    four:           0,
    six:            0,
    ballsFaced:     0,
    battingNumber:  false,
    isBatting:      false,
    isOnStrike:     false,
    isOut:          false,
    outType:        '',

    // Batting Walkin stats
    walkInOver:     0,
    walkInBalls:    0,
    walkInTeamRuns: 0,

    // Batting Out stats
    walkoutWicket:  0,
    walkoutOver:    0,
    walkoutBalls:   0,
    walkoutTeamRuns:0,
    wicketBowler:   0,
    wicketFilder:   0,
    notOutPlayerId: 0,
    notOutPlayerRuns:0,

    // Bowling stats
    overs:          0,
    balls:          0,
    overRuns:       0,
    wickets:        0,
    isBowling:      false,

};

var teamType = {
    id:                 0,
    name:               "",
    runs:               0,
    overs:              0,
    balls:              0,  // This are only legal balls from 0 to 5
    isTossWon:          false,
    players:playerType  = []
};

// Initial State
var initialState = {
    matchId:        0,
    thisOver:       [],
    prevOver:       [],
    oversTotal:     0,
    teamBatting:    teamType,
    teamBowling:    teamType
}

你的想法？

Answer 1

我会有匹配缩减器来模拟匹配中的所有内容，例如：

击球手的集合
保龄球的集合
每种额外类型的字段（byes，legbyes，noballs，wides）

为此我会添加＆＃34; live＆＃34;信息如：

现任击球手
现任击球手罢工
目前的投球手保龄球

请注意，我会遗漏可以＆＃34;派生的数据＆＃34;来自其他州。例如，总得分可以从击球手的得分加上额外成绩的总和得出。

匹配状态的可能实例可能如下所示：

{
  batsmen: {
    48: {
      id: 48,
      name: 'David Warner'
      runs: 10,
      balls: 18,
    },
    64: {
      id: 64,
      name: 'Matthew Renshaw',
      runs: 2,
      balls: 20,
    },
  },
  byes: 2,
  legbyes: 0,
  noballs: 3,
  wides: 0,
  bowlers: {
    82: {
      name: 'Jimmy Anderson',
      balls: 18,
      runs: 6,
      wickets: 0,
    },
    93: {
      name: 'Stuart Broad',
      balls: 17,
      runs: 9,
      wickets: 0,
    },
  },
  batsmanOnStrike: 48,
  batsmanOffStrike: 64,
  currentBowler: 93,
}

您可能希望为离散评分事件分派操作。 e.g。

{
  type: 'RUNS_SCORED',
  runs: 3,
}

您的减速机可以通过以下方式处理它：

case 'RUNS_SCORED': {
  const batsman = state.batsmen[state.batsmanOnStrike];
  const bowler = state.batsmen[state.currentBowler];

  return {
    ...state,
    batsmen: {
      ...state.batsmen,
      [state.batsmanOnStrike]: {
        ...batsman,
        runs: batsman.runs + action.runs,
        balls: batsman.balls + 1,
      },
    },
    bowlers: {
      ...state.bowlers,
      [state.currentBowler]: {
        ...bowler,
        balls: bowler.balls + 1,
        runs: bowler.runs + action.runs,
      },
    },
    batsmanOnStrike: action.runs % 2 === 0 ? state.batsmanOnStrike : state.batsmanOffStrike,
    batsmanOffStrike: action.runs % 2 === 0 ? state.batsmanOffStrike : state.batsmanOnStrike,
  };
}

这个例子不完美且不完整，但我希望它能给你一般的想法。

React - 我需要建议如何设计状态数据结构

1 个答案: