In this post, we are going to see how to use Ramda Lens.app
For example, we have data:post
const {log} = require('./lib/log'); const R = require('ramda'); const band = { name: 'K.M.F.D.M', members: { current: [ {name: 'Sascha Konictzko', plays: ['vocals', 'synth', 'guitar', 'bass']}, {name: 'Lucia Cifarelli', plays: ['vocals', 'synth']}, {name: 'Jules Hodgson', plays: ['guitar', 'bass', 'synth']}, {name: 'Steve While', plays: ['guitar']} ], past: [ {name: 'Raymond Watts', plays: ['vocals', 'synth']}, {name: 'En Esch', plays: ['vocals', 'drums', 'guitar', 'synth']}, {name: 'Gunter', plays: ['guitar', 'synth']} ] } };
R.lens takes a getter and a setter: ui
const name = R.lens(R.prop('name'), R.assoc('name')); log(R.view(name, band)); // K.M.F.D.M log(R.set(name, 'M.D.F.M.K', band));
There is a shorter way to do getter/setter partten:this
const name = R.lensProp('name'); const makeLower = a => a.toLowerCase(); log('over lensProp: ', R.over(name, makeLower, band)); // name: "k.m.f.d.m"
log('over compose: ', R.compose(R.view(name), R.over(name, makeLower))(band)); // name: "k.m.f.d.m"
const currentMemebers = R.lensPath(['members', 'current']); log('view path', R.view(currentMemebers, band))
We can also combine two lens together:spa
const name = R.lensProp('name'); const currentMemebers = R.lensPath(['members', 'current']); //log('view path', R.view(currentMemebers, band)) const makeLower = a => a.toLowerCase(); // Use two lens together const lowerName = R.over(name, makeLower); const lowerMembers = R.over(currentMemebers, R.map(lowerName)); console.log('new lower name', lowerMembers(band));
const first = R.lensIndex(0) const getFistCurrentMember = R.compose( R.view(first), R.view(currentMemebers) ) console.log(getFistCurrentMember(band)) // { name: 'Sascha Konictzko', plays: [ 'vocals', 'synth', 'guitar', 'bass' ] }
Actually there is a better way to do this: by using R.compose(), one thing to notice is that, when working with lens, compose should go from left to right, instead of right to left. This is because how lens works in code.code
In our example:orm
const band = { name: 'K.M.F.D.M', members: { current: [ {name: 'Sascha Konictzko', plays: ['vocals', 'synth', 'guitar', 'bass']}, {name: 'Lucia Cifarelli', plays: ['vocals', 'synth']}, {name: 'Jules Hodgson', plays: ['guitar', 'bass', 'synth']}, {name: 'Steve While', plays: ['guitar']} ], past: [ {name: 'Raymond Watts', plays: ['vocals', 'synth']}, {name: 'En Esch', plays: ['vocals', 'drums', 'guitar', 'synth']}, {name: 'Gunter', plays: ['guitar', 'synth']} ] } };
We should get 'members' first then 'current' first member:blog
const currentMemebers = R.lensPath(['members', 'current']); const first = R.lensIndex(0) const firstCurrentMember = R.compose( currentMemebers, first ) console.log(R.view(firstCurrentMember, band))
You can think this is similar to Javascript Stack when using R.compose(lens1, len2).ip
Example: ci
Using the same data from previous example:
const band = { name: 'K.M.F.D.M', members: { current: [ {name: 'Sascha Konictzko', plays: ['vocals', 'synth', 'guitar', 'bass']}, {name: 'Lucia Cifarelli', plays: ['vocals', 'synth']}, {name: 'Jules Hodgson', plays: ['guitar', 'bass', 'synth']}, {name: 'Steve While', plays: ['guitar']} ], past: [ {name: 'Raymond Watts', plays: ['vocals', 'synth']}, {name: 'En Esch', plays: ['vocals', 'drums', 'guitar', 'synth']}, {name: 'Gunter', plays: ['guitar', 'synth']} ] } };
Requirements:
/** * 1. Lowercase the name * 2. Omit the plays from the past * 3. Lowercase the current name * 4. Create 'all' under members combine 'current' & 'past' * 5. Pick get name and to lowercase for 'members.all' */
Final results should be:
/** * { "name": "k.m.f.d.m", "members": { "current": [ { "name": "sascha konictzko", "plays": [ "vocals", "synth", "guitar", "bass" ] }, { "name": "lucia cifarelli", "plays": [ "vocals", "synth" ] }, { "name": "jules hodgson", "plays": [ "guitar", "bass", "synth" ] }, { "name": "steve while", "plays": [ "guitar" ] } ], "past": [ { "name": "Raymond Watts" }, { "name": "En Esch" }, { "name": "Gunter" } ], "all": [ "sascha konictzko", "lucia cifarelli", "jules hodgson", "steve while", "raymond watts", "en esch", "gunter" ] } } */
-----
Answer:
const R = require('ramda'); const band = { name: 'K.M.F.D.M', members: { current: [ {name: 'Sascha Konictzko', plays: ['vocals', 'synth', 'guitar', 'bass']}, {name: 'Lucia Cifarelli', plays: ['vocals', 'synth']}, {name: 'Jules Hodgson', plays: ['guitar', 'bass', 'synth']}, {name: 'Steve While', plays: ['guitar']} ], past: [ {name: 'Raymond Watts', plays: ['vocals', 'synth']}, {name: 'En Esch', plays: ['vocals', 'drums', 'guitar', 'synth']}, {name: 'Gunter', plays: ['guitar', 'synth']} ] } }; /** * 1. Lowercase the name * 2. Omit the plays from the past * 3. Lowercase the current name */ // makeLower :: s -> s const makeLower = s => s.toLowerCase(); // lowerName :: obj a -> obj b const lowerName = R.compose(makeLower, R.prop('name')); const name = R.lensProp('name'); const pastMemebers = R.lensPath(['members', 'past']); const currentMemebers = R.lensPath(['members', 'current']); // Mapping over NAME lens, make string to lowercase const lowerBandName = R.over( name, makeLower ); // Mapping over 'memebers.past' Lens, omit 'plays' prop const omitPastPlays = R.over( pastMemebers, R.map(R.omit(['plays'])) ); // Mapping over 'members.current' Lens, for each 'name' prop, make string to lowercase const lowerCurrentMemebersName = R.over( currentMemebers, R.map( R.over(name, makeLower) ) ); /** * 4. Create 'all' under members combine 'current' & 'past' * 5. Pick get name and to lowercase for 'members.all' */ const allMemebers = R.lensPath(['members', 'all']); // lensConcat :: (Lens t, Lens s) -> a -> [b] const lensConcat = (targetLen, srcLen) => data => R.over(targetLen, R.concat(R.view(srcLen, data)))(data); // A set of tranforms over prop 'members.all' // Set 'all' to [] // concat 'past' to 'all' // concat 'current' to 'all' // pick name and conver to lowercase const createAllMembers = [ R.over(allMemebers, R.map(lowerName)), lensConcat(allMemebers, currentMemebers), lensConcat(allMemebers, pastMemebers), R.set(allMemebers, []) ]; const mods = [ ...createAllMembers, lowerCurrentMemebersName, omitPastPlays, lowerBandName, ] const transform = R.compose( ...mods ); const res = transform(band);