[JS Compose] 6. Semigroup examples

Let‘s we want to combine two account accidently have the same name.

const acct1 = { name: ‘Nico‘, isPaid: true, points: 10, friends: [‘Franklin‘] }

const acct2 = { name: ‘Nico‘, isPaid: false, points: 2, friends: [‘Gatsby‘] }

So, here we can use Semi-group to combine them, because the semi-group have the knowledge how to combine for each type of object.

So we change two accounts as:

const acct1 = { name: First(‘Nico‘), isPaid: All(true), points: Sum(10), friends: [‘Franklin‘] }

const acct2 = { name: First(‘Nico‘), isPaid: All(false), points: Sum(2), friends: [‘Gatsby‘] }

But here we still have one problem which Object doesn‘t have ‘concat‘ method, so we need to use Immutable library to help:

Includes libarary:

const {Map} = Immutable;
const acct1 = Map({ name: First(‘Nico‘), isPaid: All(true), points: Sum(10), friends: [‘Franklin‘] })

const acct2 = Map({ name: First(‘Nico‘), isPaid: All(false), points: Sum(2), friends: [‘Gatsby‘] })

---------

const {Map} = Immutable;

const Sum = x =>
({
  x,
  concat: ({x: y}) =>
    Sum(x + y),
  inspect: () =>
    `Sum(${x})`
})

const All = x =>
({
  x,
  concat: ({x: y}) =>
    All(x && y),
  inspect: () =>
    `All(${x})`
})

const First = x =>
({
  x,
  concat: _ =>
    First(x),
  inspect: () =>
    `First(${x})`
})

const acct1 = Map({ name: First(‘Nico‘), isPaid: All(true), points: Sum(10), friends: [‘Franklin‘] })

const acct2 = Map({ name: First(‘Nico‘), isPaid: All(false), points: Sum(2), friends: [‘Gatsby‘] })

const res = acct1.concat(acct2)

// Showing results
console.log("Friend 1: ", res.toJS().friends[0]) //Friend 1: Franklin
console.log("Friend 2: ", res.toJS().friends[1]) //Friend 2: Gatsby
console.log("isPaid: ", res.toJS().isPaid.x) //isPaid: false
console.log("Name: ", res.toJS().name.x) // Name: Nico
console.log("Points: ", res.toJS().points.x) // Points: 12
时间: 2024-08-20 15:09:11

[JS Compose] 6. Semigroup examples的相关文章

[JS Compose] Understand 'Box' or 'Container', they are just like Array!

We'll examine how to unnest function calls, capture assignment, and create a linear data flow with a type we call Box. This is our introduction to working with the various container-style types. At first, might not be comforable with 'Box' or 'Contai

[JS Compose] 7. Ensure failsafe combination using monoids

monoids is a semi-group with a neutral element. A semigroup, it does not have an element to return so it's not a safe operation, whereas with the monoids we could take as many as we possibly want, even none, and still return us back something. It's a

[JS Compose] 5. Create types with Semigroups

An introduction to concatting items via the formal Semi-group interface. Semi-groups are simply a type with a concat method that are associative. We define three semigroup instances and see them in action.   A semigroup is a type with a concat method

[JS Compose] 1. Refactor imperative code to a single composed expression using Box

After understanding how Box is, then we are going to see how to use Box to refacotr code, to un-nested expression. For example, we have code: const moneyToFloat = str => { const cost = str.replace(/\$/g, ''); return parseFloat(cost); } const percentT

[JS Compose] 3. Use chain for composable error handling with nested Eithers (flatMap)

We refactor a function that uses try/catch to a single composed expression using Either. We then introduce the chain function to deal with nested Eithers resulting from two try/catch calls. For example we have this code using try & catch: const getPo

[JS Compose] Enforce a null check with composable code branching using Either

We define the Either type and see how it works. Then try it out to enforce a null check and branch our code. Now, we try to make Box more useful. We want to do a force null check by define "Right" and "Left" tow boxes. What "Right

【js】为什么要使用react+redux

前端的浪潮一叠叠袭来,带走了jQuery,带走了backbone,带来了react,带来了redux,但是面对层出不穷的前端技术,我们应该何去何从呢?近一年来笔者的也发生了同样的变化,技术栈从.net+backbone+requirejs+grunt变成了nodejs+react+webpack+gulp,一系列的变化也让笔者对整个过程,整个闭环的工具链有了一些自己的感受和理解,于是有了今天此文. 其实react出现得很早,但是笔者所在的唤作"大象转身"的大公司,所以内部技术的迭代,并

Redux系列x:源码解析

写在前面 redux的源码很简洁,除了applyMiddleware比较绕难以理解外,大部分还是 这里假设读者对redux有一定了解,就不科普redux的概念和API啥的啦,这部分建议直接看官方文档. 此外,源码解析的中文批注版已上传至github,可点击查看.本文相关示例代码,可点击查看. 源码解析概览 将redux下载下来,然后看下他的目录结构. npm install redux 这里我们需要关心的主要是src目录,源码解析需要关心的文件都在这里面了 index.js:redux主文件,主

Weex命令

1.下载安装 $ git clone https://github.com/alibaba/weex.git //通过brew安装node $ brew install node //通过node安装 weex-toolkit$ npm install -g weex-toolkit //安装iOS包管理工具 cocoapods$ sudo gem install cocoapods 2.安装控件启动Demo $ npm install $ ./start 3.创建自己的项目 $ weex in