Redux читает элемент массива по индексу

Question

У меня есть массив пост-объектов, который хранится в redux. Я сопоставляю сообщения и передаю идентификатор и индекс компоненту Post:

posts.map((post, index) => {
  <Post id={post.id} index={index} />
});

В руководстве по стилю redux указано:

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

Например, вместо того, чтобы просто подключить компонент <UserList> и прочитать весь массив пользователей , попросите <UserList> получить список всех идентификаторов пользователей, отобразить элементы списка как <UserListItem userId={userId}>, подключить <UserListItem> и извлечь собственную запись пользователя из хранилища.

Однако я у меня нет списка идентификаторов сообщений, но я все еще пытаюсь получить больше компонентов, подписанных путем сопоставления сообщений и передачи ссылки на компонент сообщения вместо самого сообщения. (Это хорошая идея?)

У меня вопрос, как мне читать сообщения из магазина. По идентификатору или по индексу:

1. post = state.posts.find (post => post.id === props.id)
2. post = state.posts [props .index]

Очевидно, чтение по индексу будет намного быстрее. Но массив сообщений можно переупорядочить. Итак, я хочу знать, является ли индекс, созданный функцией карты, надежным?

Answer 1

Руководство по стилю redux - это просто руководство по стилю. Даже если они рекомендуют перебирать список идентификаторов, если у вас есть список компонентов, вы можете перебирать его.

Единственная «проблема» здесь в том, что ваше приложение может со временем становиться все более и более сложным, и может быть трудно поддерживать его позже.

Если вы все еще хотите найти сообщение по идентификатору, метод find хорош и не должен вызывать проблем c, если у вас нет сотен элементы в вашем магазине.

Если вы хотите использовать второе решение, вы можете преобразовать свой магазин в редукторе примерно так:

  function reducer(action, state) {
    switch (action.type) {
      case 'YOUR_CASE': {
        return {
          ...state,
-         itemList: action.itemList,
+         itemList: Object.fromEntries(
+           action.itemList.map(item => ([item.id, item]))
+         ),
        }
      }
    }
  } 

У вас будет такой объект в вашем магазине:

{
  1: {
    id: 1,
    title: 'some item',
  },
  2: {
    id: 2,
    title: 'some other item',
  },
}

Обратите внимание, что Object.fromEntries - это только недавний API , вы можете захотеть заполнить его полифилом.

Конечно, вам нужно измените все вызовы, которые использовали itemList в качестве массива до этого:

- itemList: state.itemList,
+ itemList: Object.values(state.itemList),