부작용이있는 React/Redux 데이터로드

Question

예약 시스템의 스텁이 있다고 가정 해 봅니다.

예약을 만들 때 고객을 검색하고 예약중인 고객을 선택할 수 있습니다. 고객을 선택하면 관련 고객 연락처가 부작용으로로드됩니다. 사용자는 예약을 위해 이러한 연락처 중 하나를 선택해야합니다. 난 단지 고객 ID를하고 customerContactId을 저장, 저장시

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

:

의 내 상태 모양 척하자이 같은 것입니다.

이제이 예약을 나중에 편집하고 싶다고 가정 해 봅시다.

는 나도

1) 내가 필요로하는 부작용을 유발하기 위해 내가 가지고있는 데이터, 기본적으로 "재생"작업을 가져 오기 (예를 들어, 고객을 설정하고 고객을로드의 부작용을 일으킬 수 연락처) 또는

2) 가져온 데이터를 가져 와서 필요한 추가 데이터를 수동으로로드 한 다음 한 번에 전체 응용 프로그램 상태를 설정하십시오.

앞으로 나아갈 수있는 최선의 경로에 대한 의견은 무엇입니까? 이것은 단순한 예입니다. 실제 시나리오에 최소한 2 ~ 4 가지 추가 부작용이 발생한다고 가정 해 봅시다.

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() 

좀 더이 방식으로 첫 번째 옵션을 맞는 것 같아요 : 당신이 customerContactId 여부 (매우 많은 의사가)이 있다면 처리하기 위해 create/loadCustomerBooking 기능을 일반화한다처럼

Answer 1

는 소리가 난다. 아마 당신은 하나의 무용담 안에이 복잡한 일련의 파견과 부작용을 캡슐화해야합니다. 이것은 한 번의 행동으로 시작할 수 있습니다. 해당 액션이 실행될 때까지 기다리는 부작용이 TAKE 인 경우 복잡한 무단으로 차단됩니다. 당신이 찾은 것과 비슷합니다. in this redux-saga example. 만들 때

이 같은 순서를 가지고 :

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

그리고이 당신의 복잡한 populateCustomerBooking 사가는 POPULATE_BOOKING 행동에 takeEvery 같은 일을하고있다

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

를로드 할 때. 이것은 동일해야하는 것처럼 들리므로 모든 논리를 재사용 할 수 있습니다. 내 생각에이 방법은 DRY 원칙을 따르기 때문에 바람직합니다. 동작을 예측 가능하고 유지 관리 할 수 ​​있습니다. 한 곳을 업데이트하고 문제를 해결하는 것을 잊지 않을 것입니다. 테스트 할 코드가 적음)