Action Series

Traditionally, in order to create a flow, each component will have to know what to do next to step through a series. This causes a limitation as components in that context won't be able to be reused without difficult to understand business logic.

Aquaman, in contrast, leverages Redux action (which are plain objects) and arrays to create flows.

const onboardingSeries = [showWelcomeModal, showNavEducationTooltip];

The above series is composed of two steps, the first is an action creator to show a modal, the second to show a tooltip. More steps could easily be added on to the series, the order can be rearranged, and the steps could be used in different flows, all without changing the components themselves or adding any sort of messy logic.

const onboardingSeries = [showWelcomeScreen, showWelcomeModal,
    showSidebarEducationTooltip, showNavTooltip, showSettingTooltip];

Aquaman provides more flexibility than just having a series of Redux actions. Series can consist of the following:

1. Redux action

2. Redux action creator

3. Branch

4. Multi-action

Redux action

Redux actions are plain objects with a type property, and possibly other values representing a payload.

const someAction = { type: 'SOME_ACTION', data: 42 };

Redux action creator

Action creators are functions that return Redux actions. They're useful for programmatically determining the payload for an action, although it's common to use action creators for everything, even if an object doesn't have a payload. Aquaman will be smart enough to figure out if you've passed an action creator and will dispatch the returning action. But you can also call the function yourself if you want.

// showWelcomModal and showNavEducationTooltip are action creators.
// Neither take any arguments, so can call them if you want.
const onboardingSeries = [showWelcomeModal(), showNavEducationTooltip];

Branch

Not all flows are linear. Aquaman allows for branching of flows to allow your users to go down different paths depending on what they do. See more here.

Multi-action

It's common that you'll face a situation where you want to do multiple things on a single step, or do something that won't have a button for a user to click aquamanNext and exit the flow. This is where you'll have a multi-step, which will just be another array. See more here.