Javascript Lit元素和Redux：更新数组中的对象

我正在尝试更新嵌套在

players

数组中的对象中的

roll

属性。 我的状态是这样的：

players: [
  {
    "id": "44ufazeep0o",
    "name": "test-player-1",
    "roll": 0,
    "totalWins": 0
  },
  {
    "id": "eu8hutex7z9",
    "name": "test-player-2",
    "roll": 0,
    "totalWins": 0
  }
]

这是我的

操作

：

export const addRoll = (roll, id) => {
  return {
    type: ADD_ROLL,
    roll,
    id,
  }
}

这是我的

减速机

：

case ADD_ROLL:
  return state.players.map((player) => {
    if (player.id === action.id) {
      return {
        ...player,
        roll: action.roll,
      }
    }
    return player;
  });
  ...

我正在观看

state.players

中的组件，如下所示：

import { connect } from 'pwa-helpers'; // connects a Custom Element base class to the Redux store
...

stateChanged(state) {
   this.players = state.players;
}

render() {
  return html`${this.players.map((player)=> html`<h1>${player.name}</h1>`)}`
}

从“pwa助手”导入{connect}；//将自定义元素基类连接到Redux存储
...
状态已更改（状态）{
this.players=state.players；
}
render（）{
返回html`${this.players.map（（player）=>html`${player.name}}）`
}

现在，每当我调用

store.dispatch（addRoll（this.roll，this.id））

，

this.players.map（）

在我正在观看的组件中返回

未定义的
。
任何关于为什么会发生这种情况的意见都将不胜感激
 调度添加滚动操作后，您将从状态返回一个数组，而不是一个包含玩家键的对象。更新它的正确方法是

case ADD_ROLL:
  return {
    ...state,
    players: state.players.map((player) => {
      if (player.id === action.id) {
        return {
          ...player,
          roll: action.roll,
        }
      }
      return player;
    });
  }
  ...

我想stateChanged方法永远不会被调用。在stateChanged方法中记录console.log状态时的结果是什么？