В каком виде лучше хранить данные в store?

Question

[Artem Maximum]

Возник вопрос, при хранении списка записей в store, в каком виде лучше и удобнее хранить данные... в массиве или в объекте?

так:

[
   {
      id: "Ad6dcCD3",
      name: "Hello",
      age: "55"
   },
   {
      id: "SdQcC37a",
      name: "Lol",
      age: "55"
   },
]

или так:

{
   Ad6dcCD3: {
      id: "Ad6dcCD3",
      name: "Hello",
      age: "55"
   },
   SdQcC37a: {
      id: "SdQcC37a",
      name: "Hello",
      age: "55"
   }
}

В данный момент я храню данные в объекте, однако приходится в некоторых местах сильно изворачиваться, например при выводе данных в react компоненте, при использовании функции map, нужно обязательно отправлять туда массив а не объект. Приходится получать ключи существующего объекта с помощью _.keys(obj); и по этому массиву делать вывод, подставляя ключи в выводимый объект.

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

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

Comments

[Константин Громов]

_.map и в lodash, и в underscore может принимать первым аргументом объект, так же преобразовывая его в массив. Для поиска по id внутри массива подходит нативный метод Array.prototype.find (или _.find, если не используется babel).

Answer 1

[Максим]

Добрый день! Ваш вопрос очень хорошо разбирается во втором курсе на egghead от создателя Redux. Конкретно, один из самых близких к вашему вопросу ответ - https://egghead.io/lessons/javascript-redux-normal... (используется normalizr).

Но мой ответ, к вам не сколько в видео про "нормалайзер", а про то, что посмотрите весь курс и вы познакомитесь с такой темой, как селекторы. То есть, будете вытаскивать в компонентах только нужные данные с помощью определенных функций селекторов, которые опишете в ваших редьюсерах. У вас получится как минимум на 1 уровень глубже использовать combineReducers для того, чтобы держать:
а) массив id-шек
б) объект с ключами, в виде id ваших записей (объект объектов, так сказать)

Говорю это опираясь на свой опыт. После перехода на "массив с id" + "объект объектов" + селекторы => проблема указанная в вопросе исчезает!

Привожу скриншот из проекта, над которым сейчас работаю: (на странице рендерится список поставщиков)


P.S. этот вопрос будет подробно разобран в новом туториале, но боюсь он выйдет не раньше конца лета.

Comments

[Artem Maximum]

Спасибо вам, очено полезно для повышения опыта))

[Artem Maximum]

Artem Maximum: очень*

Answer 2

[vispik88]

Максим, вам вопрос.

А что делать, если такие данные как, например у вас, необходимо преобразовать для отрисовки?
Т.е. к вам приходит массив Products, в каждом условно есть куча параметров и параметр Provider:

{
"name": "n",
"id": "i",
"provider": "p",
"sub_provider": "sp"
}

И вам для отрисовки нужно преобразовать их в многоуровневую структуру:

var products_structure = {
 "provider_1": {
  "name": "",
  "id": "",
  "sub_providers": {
     1: {
      "name" :"",
      "id" :"",
         "products": {
            1: {},
            2: {}
      }
    }
  }
}

Данные приходят только по продуктам, но структура нужна такая. Причём данные приходят раз в секунду по сокету. Т.е. нам фактически нужно обновить их в стейте и запустить какую-то функцию которая будет собирать необходимую структуру. Но это долго и будет проблема с рендером, т.к. меняются ссылки.

Как быть?