Branching

Aquaman allows you to construct flows that have branching in them. This will allow users to have different experiences depending on what they select.

To do this, use the branch function to create a Branch object.

interface Branch {
    __BRANCH__: true;
    [seriesIndx: string]: ActionSeries | boolean;
}

function branch(...args: ActionSeries[]): Branch;

import { branch } from 'aquaman-redux';

const onboardingSeries = [showPickerScreen, branch([showTooltip1], [showTooltip2])];

In the corresponding component for showPickerScreen will be two different callbacks using aquamanNext. If aquamanNext(0) is called and dispatched, it will trigger the first flow (with showTooltip1). If aquamanNext(1) is dispatched, it will lead the user into the second branch flow.

The number you pass to aquamanNext needs to correspond to the index of the arguments of your branch function call. Each argument is an action series, so can branch, or contain multi-step actions like your root series. You can have as many leaf series as you need. You can still have steps after your branch step, and all of your leaf series will re-converge to that step when they're complete.

const onboardingSeries2 = [
    showPickerScreen,
    branch(
        [showTooltip1, showTooltip2],
        [showTooltipPicker, branch(
            [showTooltip1],
            [showTooltip2]
        ),
    ),
    showFinalStepTooltip
];