React / Redux加载带副作用的数据

Question

Let's say I have a stub of a booking system.

When I create a booking, I can search among our customers and select which customer I'm booking. Upon selecting a customer, the associated customer contacts are loaded as a side effect. As a user, I have to pick one of these contacts for the booking.

Let's pretend my state shape is something like this:

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

Upon save, I only save customerId and customerContactId.

Now let's say I want to edit this booking at a future point in time.

I can either

1) Fetch the data I have, and basically "replay" the actions to trigger the side effects that I need (for instance, set the customer and trigger the side effect of loading the customer contacts) or

2) Fetch the data I have, manually load any extra data I need, and then set the complete application state in one go.

What are your thoughts on the best route to proceed? This is a simplified example, let's say the real world scenario has at least 2-4 additional side effects that need to be triggered.

Answer 1

It sounds like you should generalize the create/loadCustomerBooking functionality to handle if there's a customerContactId or not (very much pseudocode):

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

I guess this more fits your first option in a way. You should probably encapsulate this complicated sequence of dispatches and side effects inside one saga, which you can kick off with a single action. You have your complicated saga blocking on a TAKE side effect waiting for that action to be fired. Similar to what you find in this redux-saga example .

You have a sequence like this when creating:

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

And this when loading

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

Your complicated populateCustomerBooking saga is doing something like a takeEvery on the POPULATE_BOOKING action. This allows you to reuse all that logic, since it sounds like it should be the same. In my mind this approach is preferable because it follows DRY principles, allowing the behavior to be predictable and maintainable - you're not going to forget to update it one place and break stuff. Less code to test too ;)