How to simplify working with normalized arrays in a react-redux application?

Question

JavaScript

Hello! :)
At the moment I'm working on the client side of the application, where almost all data is stored in a normalized form in redux - store. This includes arrays that, instead of the usual format, have something like this: {byID: {}, IDs: []}. One of the obvious advantages of this approach is a quick search for an element by its id. But when such an array is passed through props to a react component, the pain begins. The render() method becomes more difficult to read, for comparison - the display of a denormalized array looks something like this:
list.map ( item => item.caption ), and a normalized one - list.IDs.map ( id => list.byID[id ].caption ). There is no need to talk about more complex operations, according to the type of filtering - the intricacy of the methods increases significantly.
At the moment, I see 2 approaches: denormalize the array in the corresponding selector, or refuse to normalize arrays in principle, and store them in redux - store "as is".
Actually, the question is: which of these two approaches is more optimal, and are there alternatives.

Answer 1

to be honest, the problem is far-fetched a little less than completely, except that IDs instead of the more familiar ids, the eyes are a little off and but this is a matter of taste and agreements within the team
, don’t worry, there are much more pressing problems))