[Compose] 16. Apply multiple functors as arguments to a function (Applicatives)

Posted 2020-08-24

?????????header   tip   size   cal   argument   cat   map   sel   screens   

We find a couple of DOM nodes that may or may not exist and run a calculation on the page height using applicatives.

 

For example we want to get the main content section size by reduce the height of header and footer, nomarlly we will do like this:

1. get the header height

2. get the footer height

3. Use screen height - header - footer.

 

const $ = selector =>
  Either.of({selector, height: 10})

const getScreenSize = (screen, header, footer) => screen - (header + footer);

$(???header???).chain(header => 
    $(???footer???).map(footer => 
        getScreenSize(800, header, footer)
    )   
)

 

This happens in sequential, we can use currey function to improve the code:

const getScreenSize = screen =>  header =>  footer => screen - (header + footer);

Either.of(getScreenSize)
    .ap($(???header???))
    .ap($(???footer???))

 

Or we can use:

const liftA2 = (f, fx, fy) =>
  fx.map(f).ap(fy)

const res = liftA2(getScreenSize(800), $(???header???), $(???footer???))