Загрузка данных React/Redux с побочными эффектами

Допустим, у меня есть заглушка системы бронирования.

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

Давайте представим, что моя форма состояния выглядит примерно так:

{
    customer: {id: 1, name: "Dandy Inc"}
    customerContacts: [{id:1, name: "John Doe"},{id:2, name: "John Doe"}]
    customerContactId: 2
}

При сохранении я сохраняю только идентификатор клиента и идентификатор клиента.

Теперь предположим, что я хочу отредактировать это бронирование в будущем.

я тоже могу

1) Получить данные, которые у меня есть, и в основном «воспроизвести» действия, чтобы вызвать побочные эффекты, которые мне нужны (например, установить клиента и вызвать побочный эффект загрузки контактов клиента) или

2) Получить данные, которые у меня есть, вручную загрузить любые дополнительные данные, которые мне нужны, а затем установить полное состояние приложения за один раз.

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


reactjs javascript redux redux-saga
person Poyan    schedule 07.06.2016    source источник
comment
Я думаю, что в магазине Redux уже должно быть все, что вам нужно, или я что-то упустил в вашем вопросе.   -  person U r s u s    schedule 07.06.2016

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, вы должны обобщить функциональность create/loadCustomerBooking, чтобы обрабатывать, есть ли customerContactId или нет (очень много псевдокода):

populateCustomerBooking = (customerId, customerContactId) =>
    loadContacts(customerId)
    if (customerContactId) 
        setContactWithSideEffects(customerContactId)
    runOtherCustomerSideEffects(customerId)
    // And so on...

// This is called when a contact is chosen or we're loading.
setContactWithSideEffects = (customerContactId) =>
    dispatch(SET_CUSTOMER_CONTACT)
    runContactSideEffects()

Я думаю, это больше подходит вашему первому варианту. Вам, вероятно, следует инкапсулировать эту сложную последовательность отправок и побочных эффектов в одну сагу, которую вы можете запустить одним действием. У вас есть сложная блокировка саги на TAKE побочном эффекте, ожидающем запуска этого действия. Подобно тому, что вы найдете в этом примере Redux-saga.

У вас есть такая последовательность при создании:

createBooking -> chooseCustomer -> dispatch(POPULATE_BOOKING(customerId))

И это при загрузке

loadBooking -> dispatch(POPULATE_BOOKING(customerId, customerContactId))

Ваша сложная populateCustomerBooking сага делает что-то вроде takeEvery на POPULATE_BOOKING действие. Это позволяет вам повторно использовать всю эту логику, поскольку кажется, что она должна быть одинаковой. На мой взгляд, этот подход предпочтительнее, потому что он следует принципам DRY, позволяя предсказуемому и поддерживаемому поведению - вы не забудете обновить его в одном месте и сломать. Меньше кода для тестирования;)

person rayd    schedule 08.06.2016