Lit-Element 和 Redux：更新数组中的对象

Question

我正在尝试更新嵌套在 players 数组中的对象中的 roll 属性。我的状态是这样的：

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

这是我的 action:

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

这是我的 reducer:

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>`)}`
}

现在，每当我在我正在观看的组件中调用 store.dispatch(addRoll(this.roll, this.id))、this.players.map() returns undefined state.players。非常感谢任何关于为什么会发生这种情况的意见！

Answer 1

你有 return 一个数组而不是一个对象，其中玩家在 ADD_ROLL 动作被调度后从状态中输入它。正确的更新方式是

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

Lit-Element 和 Redux：更新数组中的对象

Lit-Element and Redux: Update Object in Array

javascript

redux

lit-element

lit-html