#reactjs #redux
#reactjs #redux
Вопрос:
У меня есть ответ api, например
бронирование -> детали бронирования, список гостей, заметки, заметки гостей, документы, активность бронирования, платежи, электронные письма и т. Д
Каждый из вышеперечисленных элементов затем имеет такие действия, как добавление / редактирование / удаление, поэтому их наличие в одном редукторе сделает этот редуктор довольно большим и сложным в управлении. Должен ли я иметь один редуктор для каждого элемента? И если я это сделаю, то как передать данные конкретным редукторам. например, после успешной выборки деталей бронирования я затем передаю разные элементы в разные редукторы соответственно? Это хороший и управляемый подход?
Ответ №1:
Это зависит от структуры вашего приложения. вы должны создать один редуктор для каждого родительского компонента, но если вы чувствуете, что он становится все больше и сталкивается с трудностями в управлении, тогда вам следует выяснить, какие дочерние компоненты используются, и создавать редукторы индивидуально для них.
Лучший способ легко и повторно управлять вашим приложением — следовать атомарному дизайну. Но опять же, я говорю, что это будет зависеть от архитектуры вашего приложения.
Ответ №2:
Вы должны рассматривать каждый тип элемента (например booking
, guest
, document
, и т.д.) Как сущность. Прочитайте о нормализации формы состояния в документах redux . Вы можете рассмотреть возможность использования normalizr
пакета и / или redux-toolkit createEntityAdapter
для выполнения некоторой работы.
С каждым объектом можно обращаться одинаково, вам просто нужно включить в свое действие достаточно информации, чтобы идентифицировать правильный объект в вашем состоянии (т.е. type
и id
).
Вы можете иметь дело с различными объектами абстрактным способом, но вы также можете создавать конкретные селекторы.
const getEntity = (state, type, id) => state[type][id];
const getBooking = (state, id) => state.booking[id];
{
type: 'UPDATE_ENTITY',
payload: {
type: 'booking',
id: 5,
changes: { /*...*/ }
}
}
Когда вы получаете ответ API со многими объектами в нем, вы сначала нормализуете его, а затем сохраняете все объекты одним действием.