What is the best way to store data in a store?

Question

React

The question arose, when storing a list of records in a store, in what form is it better and more convenient to store data ... in an array or in an object?
So:

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

or like this:

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

At the moment, I store data in an object, but in some places I have to dodge a lot, for example, when displaying data in a react component, when using the map function, it is necessary to send an array there and not an object. You have to get the keys of an existing object using _.keys(obj); and on this array to draw a conclusion, substituting the keys in the output object.
When storing data in an array, it may be problematic to overwrite specific records, since they need to be searched in the array and then overwritten without changing the entire array.
When answering, please try to explain in detail why it is more correct to use this or that method of storing data, for me this is very important. Thanks in advance.

Answer 1

Good afternoon! Your question is covered very well in the second course on egghead from the creator of Redux. Concretely, one of the closest answers to your question is https://egghead.io/lessons/javascript-redux-normal... (using normalizr).
But my answer is not so much in the video about the "normalizer", but about the fact that you watch the whole course and you will get acquainted with such a topic as selectors. That is, you will pull out only the necessary data in the components using certain selector functions that you will describe in your reducers. You will be able to use combineReducers at least 1 level deeper in order to hold:
a) an array of id-niks
b) an object with keys, in the form of id of your records ( object of objects , so to speak)
I say this based on my experience. After switching to "array with id" + "object of objects" + selectors => the problem mentioned in the question disappears!
Here is a screenshot from the project I am currently working on: (a list of suppliers is rendered on the page)
PS This issue will be discussed in detail in a new tutorial, but I'm afraid it will not be released until the end of summer.

Answer 2

Maxim, you have a question.
But what if data like yours needs to be converted for rendering?
Those. the Products array comes to you, each conditionally has a bunch of parameters and a Provider parameter:

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

And you need to convert them to a layered structure for rendering:

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

Data comes only for products, but such a structure is needed. And the data comes once a second on the socket. Those. we actually need to update them in the state and run some function that will collect the necessary structure. But this is long and there will be a problem with rendering, because. links change.
How to be?