I am using "Ramda/Fantasy" library for creating Monads. And i am trying to combine IO's to get element from the DOM and change its text content. But the problem is that function that changes content of the element needs to take two arguments element, and text that we want to set. I don't know how I can that efficiently I found one solution that looks like this:
const getElement = id => IO(() => document.querySelector(id));
const setElementText = element => text => IO(() => element.textcontent = text);
getElement('h1').map(setElementText).runIO()('New Title').runIO();
Is there a better way?
Two small changes to help with your example:
setElementText allows you to partially apply the text value.chain rather than map remove the need for the second runIO call.const getElement = id => IO(() => document.querySelector(id))
const setElementText = text => element => IO(() => element.textContent = text)
getElement('h1').chain(setElementText('New Title')).runIO()
I also found a second solution to use "ap()" method which applies the function (resulting from the action in this IO instance) to the value resulting from the action in the given IO instance.
import {IO} from "ramda-fantasy";
const getElement = id => IO(() => document.querySelector(id))
const setElementText = element => text => IO(() => element.textContent = text)
const someText = IO(() => 'New Title')
const setHeading = getElement('h1').map(setElementText).ap(someText).runIO();
setHeading.runIO(); // It works