Question

在线课程的示例代码：

import * as PlayerActionTypes from '../actiontypes/player';

const initialState = [
      {
        name: 'Jim Hoskins',
        score: 31,
      },
      {
        name: 'Andrew Chalkley',
        score: 20,
      },
      {
        name: 'Alena Holligan',
        score: 50,
      },
    ];

export default function Player(state=initialState, action) {
  switch(action.type) {
    case 'PlayerActionTypes.ADD_PLAYER':
      return [
        ...state,
        {
          name: action.name,
          score: 0,
        }
      ];

      case PlayerActionTypes.REMOVE_PLAYER:
        return [
          ...state.slice(0, action.index),
          ...state.slice(action.index+1),
        ]
  }
}

由于initialState是不可变的（总是相同的），因此状态是相同的。所以，让我们说，如果我先添加一个新玩家，现在总共有四个玩家。如果那时我想删除第四个播放器（其数组中的索引为3），但它是如何工作的？

case PlayerActionTypes.REMOVE_PLAYER:
            return [
              ...state.slice(0, action.index),
              ...state.slice(action.index+1),
            ]

＆＃39;状态＆＃39>中没有索引= 3。（只有三名球员）。

我不明白。请对我的困惑提供一些帮助。提前谢谢。

Answer 1

export default function Player(state=initialState, action) {

每当调度action时，将使用2个参数调用此函数：

州（这是当前的应用程序状态）
动作

基于这些2，此函数返回新的app状态（将在下次调用此函数时用作新参数的参数）

现在，对于第一次运行，当app状态仍为null时，参数state将设置为initialState。对于每次下一次运行，由于state将不再为null，因此state参数将是当前应用程序状态。

检查ES6功能默认参数。

当state = initialState时，reducer如何工作？

1 个答案: