Redux actions depending on/coupled to other actions

Question

I am building a Redux application (my first) and am a little unclear about how much coupling is appropriate between actions.

My application has several forms whose values are serialized in the url.

For example, there is an input field for a particular search, and upon key-up a url parameter is updated. There are several other input fields that follow this pattern.

In my top-level index.js I have several blocks of code that look like this:

// Within the declaration of a high-level component
onForm1Change={(key, value) => {
        // Listened to by "formValues" state cross-section reducer
        store.dispatch({
            type: actions.FORM1_CHANGE,
            key: key,
            value: value
        });

        // Listened to by "url" state cross-section reducer, leads to a url param update.
        // Has it's own logic that is based upon the formValues state.
        // Must run after FORM1_CHANGE finishes
        store.dispatch({
            type: actions.UPDATE_URL,
            formValues: store.getState().formValues
        });
    }
}

Something about actions like UPDATE_URL doesn't feel right. This action doesn't stand on its own...it relies on other actions to be dispatched first.

Is this sort of coupling between actions a code smell? Are there any common techniques to de-couple/refactor these actions?

Answer 1

I think that's totally OK way of chaining synchronous actions. You can also use middleware like redux-thunk for this purpose to make it simpler to read (as you will store your actions dispatcher function as an action creater). Here is some article on this topic.