Aquaman Flows

Your Aquaman middleware needs to receive an array of Flow objects. Flow object have the following four properties:

  1. flowId

  2. actionSeries

  3. condition

  4. persist

  5. key

  6. observables

condition

A condition is a predicate function: a pure function that will return true or false. The function will receive your Redux state, so it's really just going to be a Redux selector. It's recommended you use reselect to compose your selectors.

The first condition to evaluate to true will activate the corresponding actionSeries.

All conditions are checked on every single Redux action. This allows for users to enter a flow once they fall into a correct state.

actionSeries

This is where the magic happens. This will be an array of Redux actions, Redux action creators, a branch object, or a sub array that contains any of the preceding or a plain function. See details.

flowId

This is just a string to identify a flow. They're not necessarily unique, so you can have different action series that get triggered under different conditions, but are designed to represent the same thing. For example, you might have multiple onboarding experiences depending on what type of user you just registered, but you want them to see just one onboarding experience. When the user finishes the flow, you will mark that the user completed an onboarding flow, thus ensuring they don't see another one.

key

A key is a unique identifier for a flow. These can usually be left undefined. You'll want to have a key if you're using aquamanForceFlow to trigger that flow from a specific user action (like a button click).

persist

By default, if a user does not complete a flow and refreshes the application, they will start back at the beginning of the flow.

By passing true to the persist property, their location will be saved in local storage and the user will start back where they left off.

observables

It's possible that your app could be depending on a data store other than Redux (a GraphQL client, for example). For this, you can plug any extra data sources into RXJS Observables, and feed them to Aquaman flows in an array. Your condition functions will then receive the Redux state as the first argument, then each subsequent argument it receives will correspond to emission of the observable in your array of observables.

Last updated