How to handle an event that produces changes in multiple state domains?

Question

I am developing a map application. It consists of two components:

• a component that displays the current user location; and
• address search component with address suggestions.

These components rely on the following state domains:

state.userAddress = {
    name: 'Didzioji g. 10, Vilnius'
};

state.addressSearch = {
    state: 'inactive',
    query: '',
    addresses: []
};

When user selects an address from address suggestion list it invokes an event handler onSelectAddress. onSelectAddress needs to trigger two state changes:

• set userLocation to new location; and
• inform the location selection prompt to close

What is the correct way to design this?

• Should the smart component dispatch two actions one after another, one that invokes USER_LOCATION_CHANGE change and another to invoke ADDRESS_SEARCH_HIDE; or
• Should the smart component dispatch a single action (e.g. USER_CHANGE_LOCATION) which is handled by two different reducers?

Answer 1

In similar situation I choose to dispatch another action from target action.

Trying to show this in code

module.exports.locationChange = function clickElement(element) {
    return function(dispatch, getState) {
        dispatch({
            type: actionTypes.USER_CHANGE_LOCATION
        });

        dispatch({
            type: actionTypes.ADDRESS_SEARCH_HIDE
        });
   }};

I use redux-thunk for async action.