Вопрос по redux, reactjs, immutable.js – React-Redux сложные (глубокие) объекты состояния

27

Учитывая мое начальное состояние редукции:

const state = {
  currentView: 'ROOMS_VIEW',
  navbarLinks: List([
    {name: 'Rooms', key: 'ROOMS_VIEW'},
    {name: 'Dev', key: ''}
  ]),
  roomListsSelected: {group: 0, item: 0},
  roomLists: [
    {
      name: "Filters",
      expanded: true,
      listItems: [
        { icon: 'images/icon-warning.svg', name: 'Alerts', filter: room => room.hasAlert },
        { icon: 'images/icon-playlist.svg', name: 'In Progress', filter: room => room.progress > 20 },
        { icon: 'images/icon-playlist.svg', name: 'Almost Done', filter: room => room.progress > 90 },
        { icon: 'images/icon-playlist.svg', name: 'Complete', filter: room => room.status === 'complete' },
        { icon: 'images/icon-playlist.svg', name: 'Recently Completed', filter: room => false },
        { icon: 'images/icon-playlist.svg', name: 'All Rooms', filter: room => true }
      ]
    }
  ],
  rooms: List(generateRooms())
}

Мне нужно сделать редуктор, который делает это:

state.roomList[n].expanded = !state.roomList[n].expanded

Я новичок в использовании рабочего процесса Redux, и лучший способ решить эту проблему - сделать roomList объектом immutable.js или написать некоторый код, чтобы сделать глубокий клон моего объекта состояния.

Также для state.roomList будут добавлены новые данные из будущих функций.

Лето / Вопрос: Каков наилучший способ вернуть новый объект состояния в редуктор при внесении таких изменений в этом состоянии, или мне следует изменить структуру объекта состояния Redux?

Что я сделал В конце концов, непреложным кажется путь. С Immutable есть несколько приемов, позволяющих сократить время рендеринга, и он отвечает всем требованиям проекта. Также достаточно рано в проекте использовать новую библиотеку без внесения серьезных изменений.

У вас есть вопрос? Felix Kling
Каков наилучший способ вернуть новый объект состояния в редуктор при внесении таких изменений в этом состоянии, или мне следует изменить структуру объекта состояния Redux? Steven Bayer

Ваш Ответ

2   ответа
6

Редукторный составРазложите ваши редукторы на более мелкие части, чтобы редуктор был достаточно маленьким, чтобы иметь дело с простой структурой данных. например. В вашем случае вы можете иметь:roomListReducer listItemsReducer listItemReducer, Затем на каждом редукторе вам будет намного легче читать, с какой частью состояния вы имеете дело. Это очень помогает, потому что каждый из ваших редукторов имеет дело с небольшим фрагментом данных, о котором вам не нужно беспокоиться о таких вещах, как «если я копирую или копирую».

Неизменный Лично я не пользуюсьimmutable.js потому что я предпочитаю иметь дело с простыми объектами. и слишком много кода нужно изменить, чтобы принять новый API. Но идея в том, чтобы изменения вашего состояния всегда выполнялись через чистые функции. Таким образом, вы можете просто написать свои собственные вспомогательные функции, чтобы делать то, что вы хотите, просто убедитесь, что они тщательно протестированы при работе со сложными объектами.

Или достаточно просто, вы всегда можете глубоко копировать свое состояние в каждом редукторе и изменять его, а затем возвращать копию. Но это явно не лучший способ.

@ StevenBayer я пропустил что-то важное? xiaofan2406
С декомпозицией моих редукторов я все равно получаю сложные объекты, они чуть меньше вложены. Ничего важного не упущено, просто полезная ссылка, если кто-то еще погуглит эту проблему. Steven Bayer
Документация по комбайну:redux.js.org/docs/api/combineReducers.html Steven Bayer
Я не уверен, как бы я внедрить субредуктор наstate.roomLists или даже больше дляstate.roomLists[n].listItems[n], Кроме того, не будет ли функциональность суб-редукторов солнечной системы составить глубокий клон? Steven Bayer
@ StevenBayer ваше дерево состояний останется прежним. Но на каждом редукторе вы будете иметь дело с более простой структурой данных. Извините, я не был ясен в посте. Кроме того, вам не всегда нужноcombineReducer, Редукторы - это просто функции, которые требуютstate а такжеaction в качестве параметров. Вы можете вызвать другую функцию редуктора в функции редуктора, чтобы уменьшить обязанности каждого редуктора. xiaofan2406
44

идиоматический Redux призывает вас «нормализовать» свое состояние и максимально сгладить его. Используйте объекты, обозначенные идентификаторами элементов, чтобы разрешить прямой поиск элементов, используйте массивы идентификаторов для обозначения порядка и везде, где один элемент должен ссылаться на другой, он сохраняет только идентификатор другого элемента вместо фактических данных. Это позволяет упростить поиск и обновление вложенных объектов. УвидетьFAQ по Redux на вложенные данные.

Кроме того, похоже, что вы в настоящее время храните ряд функций непосредственно в своем состоянии Redux.технически это работает, но это определенно не идиоматично, и нарушит такие функции, как отладка во времени, так что это сильно не рекомендуется. Redux FAQ дает больше информации опочему хранение несериализуемых значений в вашем состоянии Redux - плохая идея.

редактировать:

В качестве продолжения я недавно добавил новый раздел в документы Redux на тему«Структурирующие редукторы», В частности, этот раздел включает главы о«Нормализующая форма состояния» а также«Обновление нормализованных данных», так же как«Неизменяемые шаблоны обновления».

Все ссылки битые. transformerTroy
Недавно мы обновили инструмент для сборки документов, который изменил URL. Предполагается перенаправить старые URL-адреса, но, похоже, это не работает правильно. Я обновлю ссылки. markerikson
Примеры были бы хорошими Green
Похоже, что наиболее «правильный» ответ и хранение литеральных функций в состоянии было быстрым исправлением, которое будет изменено на более традиционный метод перед выпуском. Steven Bayer
Конечно. Один из подходов, на которые вы можете обратить внимание, - это сохранение какого-либо имени или идентификатора фильтра в вашем состоянии, а затем использование его в качестве ключа для поиска фактической функции фильтра в компоненте или селекторе, аналогично подходу, предложенному для управления диалоговыми компонентами. вstackoverflow.com/questions/35623656/... . markerikson

Похожие вопросы