Lit-Element и Redux: обновить объект в массиве

Я пытаюсь обновить свойство roll в объекте, вложенном в массив players. Мое состояние выглядит так:

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() возвращает undefined в компоненте, где я наблюдаю state.players. Мы очень ценим любую информацию о том, почему это могло произойти!


javascript redux lit-element lit-html
person suuuriam    schedule 31.05.2020    source источник
comment
Я предполагаю, что метод stateChanged никогда не вызывается. Каков результат, когда вы console.log состояние в методе stateChanged?   -  person Wezelkrozum    schedule 31.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вы вернули массив вместо объекта с ключом игроков из состояния после отправки действия ADD_ROLL. Правильный способ его обновления был бы

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