React Immutability-helper - обновляет много похожих объектов в массиве

Question

У меня есть состояние в Redux Store, и я хочу изменить все isPlaying на false. Я понятия не имею, как я могу сделать это лучше. Вот что я сделал до сих пор.

const INITIAL_STATE = {
  isPlaying: true,
  allLangs: [
        {
          shortName: 'es',
          fullName: "spanish",
          order: 0,
          isPlaying: false
        }, {
          shortName: 'pt',
          fullName: "portuguese",
          order: 0,
          isPlaying: false
        },
        {
          shortName: 'gb',
          fullName: "english",
          order: 0,
          isPlaying: true
        }
      ]
  }

return update(state,
      {
        $merge: {isPlaying: false},
        allLangs: {
          [0]: {
            $merge: {isPlaying: false}
          },
          [1]: {
            $merge: {isPlaying: false}
          },
          [2]: {
            $merge: {isPlaying: false}
          }
        }
      }); 

Итак, мой вопрос: есть ли способ сделать это лучше, чем вызывать все индексы отдельно?

Answer 1

Я бы посоветовал вам взять массив 'allLangs' в отдельную переменную массива, скажем 'newAllLangs' и использовать map (), чтобы изменить 'isPlaying' и в последнем установить этот 'newAllLangs' в состояние. Как то так.

Я думаю, что вы делаете эту манипуляцию в userAction.js. Допустим, вы получили allLangs через mapStateToProps и отправили эти данные в userAction.js с помощью mapDispatchToProps. В userAction.js вы можете манипулировать allLangs и отправлять их обратно в редуктор. А редуктор будет обновлять хранилище в зависимости от того, что вы отправляете от userAction.

Это была теоретическая часть, если вы хотите больше экспозиции. Вы можете сделать скрипку и можете поделиться здесь.

Answer 2

Учитывая текущую структуру данных, если вы хотите установить для каждого экземпляра isPlaying значение false, то то, что у вас есть, является правильным. В зависимости от вашего варианта использования, вот некоторые другие предложения:

Сброс по умолчанию

Допустим, что когда вы устанавливаете isPlaying в false, игра заканчивается, и вы начинаете новую игру. Тогда проще всего было бы просто установить состояние на initialState напрямую.

Изменить структуру данных

Это зависит от вашего варианта использования, но мой первый инстинкт заключается в том, что ваша структура данных имеет дублирование. Вы действительно можете играть в игру на английском и испанском языках одновременно? Если нет, попробуйте сделать что-то вроде этого: const allLangs = { es: { fullName: "испанский", заказ: 0, } }

Тогда в вашем состоянии вы указали бы на активный язык:

const state = {
  isPlaying: false,
  activeLanguage: "es"
}

Рефакторинг таким образом дает вам единственный источник истины.