Обновите логическое свойство в массиве объектов перед отправкой нового элемента в Redux - PullRequest
Новая
       23

Обновите логическое свойство в массиве объектов перед отправкой нового элемента в Redux

0 голосов
/ 08 июля 2019

У меня есть действие с именем ADD_USER_PICTURE, которое при каждом вызове я просто добавляю в массив новую картинку. Но есть небольшая хитрость, эти объекты изображения, которые я добавляю, имеют некоторое логическое свойство, которое сообщает, какое изображение является Enabled аватаром для профиля. Это означает, что мне нужно изменить последний текущий picture.isEnabled с true на false, чтобы новым был аватар.

Это мое действие: 

case ADD_USER_PICTURE:
    return {
       ...state,
       userInfo: {
         ...state.userInfo,
         userPictures: [...state.userInfo.userPictures, action.picture]
       }
}

Полагаю, мне нужно добавить карту и выполнить итерацию, но с помощью userPictures, как это, но я не уверен, как это сделать с Redux и из-за неизменности.

Я думаю о чем-то вроде этого: 

userPictures.map((picture) => {
    if (picture.isAvatar) {
       picture.isEnabled = false;
    }
});

Было бы намного быстрее поставить все в ложь, и все вместо поиска. Я не хочу создавать второе действие только для этого.

Любая помощь о том, как адаптировать это к Redux?

Спасибо.

1 Ответ

1 голос
/ 08 июля 2019

Если вы не хотите создавать другое действие, которое будет иметь дело с этой логикой, то вы можете просто сделать это в редукторе, хотя я бы не рекомендовал это.

Но ваш тип действия редуктора для ADD_USER_PICTURE будет выглядеть примерно так: 

case ADD_USER_PICTURE:

  const { userPictures } = state.userInfo;

  // Map through and set isEnabled to false for other pictures
  let updatedUserPictures = userPictures.map(picture => ({
    ...picture,
    isEnabled: false,
  }));

  // Insert the new profile picture within array, and set isEnabled to true
  updatedUserPictures = [
    ...updatedUserPictures,
    { ...action.pictures, isEnabled: true },
  ];

  return {
    ...state,
    userInfo: {
      ...state.userInfo,
      userPictures: updatedUserPictures,
    },
  };

ОБНОВЛЕНИЕ: Если вы решили реализовать его так, как я упоминал ниже, ваши действия будут выглядеть так: Action Functions

И вот как будет выглядеть ваш компонент: enter image description here

...