Должны ли мы создавать разные редукторы для одного объекта, полученного в качестве ответа api, чтобы избежать сложности. Или иметь один редуктор для него

#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 со многими объектами в нем, вы сначала нормализуете его, а затем сохраняете все объекты одним действием.