Сортировка данных в react + redux?

Question

[RomanSS]

Подскажите пожалуйста как решить проблему с ненужной сортировкой

1. Вытаскиваю данные из базы они уже отсортированы в нужном варианте.
В реакт приходит такой JSON:

{"list": 
    {"1003":{"name":"test3"}},
    {"1002":{"name":"test2"}},
    {"1004":{"name":"test4"}},
    {"1001":{"name":"test1"}}
}

2. Сохранение идёт в store Redux
3. Хочу вывести данные в компоненте, но он ключи сортирует от меньшего к большему.
Т.е. на выход в компонент получается такие данные:

{"list": 
    {"1001":{"name":"test1"}},
    {"1002":{"name":"test2"}},
    {"1003":{"name":"test3"}},
    {"1004":{"name":"test4"}}
}

Вывод делаю таким образом:

{Object.keys(this.props.data.list).map((key, index) => (
   <div>{this.props.data.list[key].name}</div>
))}

Получаю:
test1
test2
test3
test4

А должно быть как изначально было вытащено из базы:
test3
test2
test4
test1

Хотел сначала разместить каждый объект в свой массив:
{"list":
[{"1001":{"name":"test1"}}],
[{"1002":{"name":"test2"}}],
[{"1003":{"name":"test3"}}],
[{"1004":{"name":"test4"}}]
}
Но таких данных может быть много, и уже нельзя будет обращаться по ключу {this.props.data.list['1001'].name}, придётся пробегать постоянно по всему массиву в поисках этого ключа. Как решить эту проблему?

Answer 1

[_ _]

В пункте 1 у вас JSON не валидный. Похоже, вы имели в виду:

{"list": {
    "1003":{"name":"test3"},
    "1002":{"name":"test2"},
    "1004":{"name":"test4"},
    "1001":{"name":"test1"}
}}

Передавайте ваши данные как список, в редьюсере создавайте отдельно объект с ключами и массив id, чтобы сохранить порядок.

{"list": [
    {"1003":{"name":"test3"}},
    {"1002":{"name":"test2"}},
    {"1004":{"name":"test4"}},
    {"1001":{"name":"test1"}}
]}

var indexed = list.reduce((acc, value) => Object.assign(acc, value), {});
   var order = list.map((value) => Object.keys(value)[0]);

Так будет выглядеть вывод:

{this.props.data.list.order.forEach((key) => (
   <div>{this.props.data.list.indexed[key].name}</div>
))}

Comments

[RomanSS]

Спасибо!

Answer 2

[Максим]

Можно нормализовать данные. По этому поводу, я думаю вам будет крайне полезно посмотреть второй курс[EN] от создателя redux.

p.s. урок про нормализацию, где рассказывается, как можно решить вашу проблему, но мне кажется, чтобы понять, потребуется посмотреть весь курс.

p.p.s. полезные ссылки:
1) https://rajdee.gitbooks.io/redux-in-russian/conten... (может переведут, когда-нибудь)
2) https://habrahabr.ru/company/hh/blog/310524/ (RU)

Comments

[RomanSS]

Спасибо за ссылки, почитаю.