Как изменить состояние в React Redux без изменения данных?

Question

Мне известно о «священных» данных и о том, насколько опасными они могут стать при неправильной обработке;вот почему в моем приложении я сейчас нахожусь в положении, когда мне нужно обрабатывать вложенный длинный JSON-объект (который представляет состояние моего приложения), и мне уже становится головной болью входить и выходить из узлов / значений, которые необходимобыть исправленоЯ думал о включении Immutable.js.Теперь возникает вопрос: как мне адаптировать мои редукторы, действия, состояние и т. Д.?

Вот выдержка из моего состояния, когда оно исходит из базы данных MongoDB:

"shops": [
        {
            "shopId": "5a0c67e9fd3eb67969316cff",
            "picture": "http://placehold.it/150x150",
            "name": "Zipak",
            "email": "leilaware@zipak.com",
            "city": "Rabat",
            "location": {
                "type": "Point",
                "coordinates": [
                    -6.74736,
                    33.81514
                ]
            }
        },
        {
            "shopId": "5a0c6b55fd3eb67969316d9d",
            "picture": "http://placehold.it/150x150",
            "name": "Genekom",
            "email": "leilaware@genekom.com",
            "city": "Rabat",
            "location": {
                "type": "Point",
                "coordinates": [
                    -6.74695,
                    33.81594
                ]
            }
        },
        ...

Когдазапускается определенное действие (конечный пользователь нажимает кнопку «Мне нравится»), мне нужно добавить атрибут к связанному Shop объекту, чтобы оно выглядело так:

{
    "shopId": "5a0c67e9fd3eb67969316cff",
    "picture": "http://placehold.it/150x150",
    "name": "Zipak",
    "email": "leilaware@zipak.com",
    "city": "Rabat",
    "liked": true,
    "location": {
        "type": "Point",
        "coordinates": [
            -6.74736,
            33.81514
        ]
    }
},

Теперь,Мне удается добавить атрибут liked к отдельному объекту Shop, но когда я хочу изменить / изменить состояние (группа всех объектов Shop), я получаю дублированный объект (новый с * 1015).* атрибут и старый).Чтобы избежать этой путаницы, я хочу обработать эти операции, используя Immutable.js, чтобы убедиться, что все чисто и правильно.

С чего начать?Преобразовать ли штат в карту Immutable.js?Сообщение

Answer 1

Просто уменьшите массив идентифицированных магазинов до объекта при успешном получении.Рекомендуется делать это для любого списка уникальных элементов, чтобы избежать сложности O (n) функций поиска и более просто изменить ваше состояние.

Сократите количество магазинов при успешном получении в ваших магазинах редуктора:

shops.reduce((obj, item) => {
    obj[item.id] = item
        return obj;
}, {})

Тогда будет легко управлять вашим объектом внутри вашего магазина-редуктора при любом действии, таком как успех:

return { 
    ...state, 
   [action.shopId]: { 
       ...state[action.shopId], 
       liked: true,
    },
}

Answer 2

Вместо использования Immutable.js вы можете использовать immutability-helper с функцией update, которая возвращает обновленное значение без изменения исходного значения.

immutability-helper имеет синтаксис, вдохновленный MongoDB, поэтому привыкнуть к нему не должно быть очень сложно для вас.

Для вашего случая вы можете изменить свое состояние с помощью приведенного ниже примера:

import update from 'immutability-helper';

const id = '5a0c67e9fd3eb67969316cff'; // id of the item you need to update
const newState = update(state, {
  shops: {
    $apply: (item) => {
      if (item.shopId !== id) return item
      return {
        ...item,
        liked: true
      }
    }
  }
});