First I will explain some features of the Maybe and how it operates. If you have come across, or used, Maybes before then this next section might be of less interest to you, but I encourage you to read on for the later parts where I will introduce it into React-Redux.

A Maybe is a construct that can wrap around a potentially undefined value and help you interact with it in a smooth and predictable manner. It also convey some other benefits but I will get onto that later.

A Maybe has two sub-types: None, and Some. I find the easiest way to think of these are like an empty list, and a list containing a single element respectively:

None = []

= Some(x) = [x]

Importantly, the empty list still has all the same methods as the list that contains an element, but most of them will not actually change it.

The starting point is usually some helper method that will construct a Maybe from another type that may be null. In our web app we use monet which has a Maybe.fromNull method that accepts a value that might be null or undefined; it returns:

None if value is undefined or null

Some(value) if value is defined.

(In our mobile app we instead use folktale that has a similar method: Maybe.fromNullable.)

In order to carry out an operation on the value inside a Maybe you can call .map on it, the same way you would to change a value inside a list. If you had a value this will change it, if you didn’t have a value everything still works but nothing changes.

When you want to actually display the value you will need to deconstruct the Maybe and get the value out if you have it. If you don’t have a value you’ll need to provide some sort of alternative. In monet the method for this is called orSome. To use it you would do something of the form: maybeNumber.orSome(0)

These three methods (fromNull, map, orSome) come together to mean that you construct a Maybe at one edge of your stack and resolve it at the other edge, passing it through as a Maybe and using .map on it in the intermediate parts. This can mean taking a value that your API may or may not provide and using Maybe.fromNull to wrap it up, passing it through to your component and then calling .orSome to decide what to display as an alternative if you don’t have it. This could still be .orSome(null) but, importantly, you only have to decide that right at the end, nothing before then needs to know what the alternative is.

One more thing that Maybes give you that is very helpful is a flatMap (aka chain in folktale). This acts like map but allows you to combine two Maybes and it returns None if either of them are None and Some only if they are both Some. For instance:

If you wanted to extend this to more values that may or may not exist you just include more flatMaps.

If you are familiar with flow’s notation for types the types of these are as follows:

There are further constructs that can help with all that nesting, but I will leave that for a future post as I don’t want to overly complicate matters here.