Я новичок в редуксе и придумала архитектуру, которая кажется неправильной. Я надеюсь, что кто-то может объяснить мне лучший способ для разработки моего приложения.
Суть в том, что я хотел следовать идее, чтобы хранилище редуксов было как можно более плоским, но на этом я получил магазин, представляющий собой один гигантский объект. У меня только 1 редуктор и 1 действие. Это все кажется мне просто неправильным. Но тогда мое приложение довольно ограничено.
Справочная информация
Я разрабатываю приложение, которое будет общаться через синий зуб с медицинским устройством. Для данного экрана перед рендерингом мне нужно получить интересующие элементы данных. Набор элементов данных на устройстве фиксирован и известен заранее. Приложение представляет собой просто инструмент для их отображения и, возможно, обновления.
Пример
«Информационный экран» отображает информацию о текущем состоянии устройства. Для простоты предположим, что на экране будут отображаться некоторые элементы в столбце. Предметы
- Объем
- Скорость
- Интервал
- isIntervalEnabled
Мне нужно будет отправить команду выборки на устройство для каждого элемента данных по одному. Затем устройство должно (в какой-то момент) отправить ответ, содержащий данные для каждого из рассматриваемых элементов. В ответе должно быть обновлено хранилище, чтобы эти элементы были доступны к моменту передачи mapStateToProps для подключения.
Текущая архитектура магазина и порядок получения предметов из магазина
На данный момент я чувствую, что мое хранилище избыточных данных - просто большая база данных. Поскольку я заранее знаю все элементы данных, которые мне понадобятся от устройства, я решил просто инициализировать состояние со всеми этими элементами данных.
{
volume: {amount: 30, units: ML},
rate: {amount: 30, units: ML},
interval: {amount: 20: units ML_PER_HOUR},
isIntervalEnabled: true
}
Обратите внимание, что в этом примере это просто фиктивные значения, в действительности ключи будут иметь значения undefined, и только ответ от устройства и обновление в хранилище может дать значение элементу
Я создал селекторы для каждого из элементов в отдельном файле, которые выглядят примерно так.
const volume = (state) => state.volume;
const volumeSelector = createSelector([volume], (volumeObject) => volumeObject);
Каждый элемент имеет такую структуру. Обратите внимание, что createSelector из библиотеки повторного выбора.
В нижней части экрана «Информация об устройстве» у меня есть функция mapStateToProps, подобная этой
function mapStateToProps(state){
return {
volume: volumeSelector(state),
rate: rateSelector(state)
interval: intervalSelector(state)
isIntervalEnabled: intervalSelector(state)
}
}
(На самом деле у меня около 30 предметов, которые я получаю с устройства)
И некоторые экраны также не только хотят получать информацию с устройства, но и отправлять информацию на устройство. Для этого я написал такие действия
actionUpdate(deviceItemId, propsToUpdate){
return {type: "Update", deviceItemId, propsToUpdate}
}
И такой редуктор
updateRecuder(state, action){
const theProps = action.propsToUpdate
const theId = action.deviceItemId,
const updatedItem = <merge state[theId] with theProps>
return state merged with updatedItem
}
Это значит, что у меня есть около 30 элементов устройства 1 действие редуктора 1, которое кажется совершенно отличным от всего, что я видел в других проектах редуксов. В некотором смысле кажется, что я просто использую избыточность как базу данных. Мне интересно
- Что я делаю, плохая идея и почему?
- Как мне перестроить эту штуку, чтобы я следовал стандартным шаблонам редуксов