Multi-action step

It's common to have a step in which multiple different things occur, or a step which has "side effects". For that, multi-action steps are useful. These are just arrays which will have multiple actions or functions that get all get called/dispatched at the same time.

import { END_FLOW } from 'aquaman-redux';

// Two step series, the second step does multiple things
const onboardingSeries = [showWelcomeModal,
    [
        () => trackingEvent("completed_onboarding"),
        showWelcomeCelebrationAnimation,
        createWelcomeMessage,
        END_FLOW,
    ],
];

In the example above, the user would experience a series with two steps, the first would be some sort of modal. The second step would show some sort of animation and would create a welcome message somewhere, while also firing a tracking event in the background.

showWelcomeCelebrationAnimation and createWelcomeMessage in this case are both action creators, while trackingEvent is a plain function that returns undefined, and the wrapping arrow function is a plain function as well.

FORCE_END_MULTISTEP

Important to note here is that there wouldn't be a way for the user to "step through" here and complete the flow. The second step doesn't involve showing a component that would have a aquamanNext or aquamanClose handler attached to it. Therefore, it's necessary for there to be a FORCE_END_MULTISTEP call in the multi-action. This is the only time you need to use FORCE_END_MULTISTEP in Aquaman.

If you have a step that needs to do something with Redux side effects, you should still use Redux-Thunk, Redux-Saga or some other similar side effect library and have the response call aquamanNext to continue the flow.

Last updated