When developing a Finite State Machine, it is often necessary to apply multiple transitions in tandem. To accomplish this in most Redux work flows requires at best, implementing multiple action handlers in separate reducers; or at worse, the need to duplicate logic for similar action handlers, sometime across multiple files. However when using a State ADT, we can easily combine these independent transitions by simply chain-ing multiple discrete transitions into one transaction. We demonstrate this interface by transitioning two portions of related state with one transaction.

const { curry, compose, State, mapProps, composeK } = require("crocks");

const { modify } = State;

const state = {
left: 8,
moves: 0
}; const inc = x => x + 1;
const dec = x => x - 1; const clamp = (min, max) => x => Math.min(Math.max(min, x), max);
const clampAfter = curry((min, max, fn) =>
compose(
clamp(min, max),
fn
)
);
const over = (key, fn) => modify(mapProps({ [key]: fn })); const limitMoves = clampAfter(0, 8); const decLeft = () => over("left", limitMoves(dec));
const incMoves = () => over("moves", limitMoves(inc)); // Then there are a series of chain functions, using composeK
/**
* replace:
* decLeft()
* .chain(decLeft)
* .chain(decLeft)
* .chain(decLeft)
* .chain(incMoves)
* .chain(incMoves)
*/
const applyMove = composeK(
incMoves, incMoves, decLeft, decLeft, decLeft
) const res = applyMove()
.execWith(state);
console.log(res); //{ left: 5, moves: 2 }

Another example:

const state = {
cards: [
{id: 'green-square', color: 'green', shape: 'square'},
{id: 'orange-square', color: 'orange', shape: 'square'},
{id: 'blue-square', color: 'blue', shape: 'triangle'}
],
left: 8,
moves: 0
} const {State, when, assign, map, mapProps, propEq} = require('crocks');
const {modify} = State; const markSelected = id => assignBy(propEq('id', id), {selected: true})
const assignBy = (pred, obj) => when(pred, assign(obj));
const over = (key, fn) => modify(mapProps({ [key]: fn })); const selectCard = id => over('cards', map(markSelected(id))) console.log(
JSON.stringify(
selectCard('green-square').execWith(state),
null,
2
)
); /*
// Using Ramda to implememnt the same logic
const {compose, map, propOr, when, propEq, mergeLeft} = require('ramda'); const markAsSelected = (id) => when(propEq('id', id), mergeLeft({selected: true}))
const over = (key, fn) => compose(map(fn), propOr([], key)); const selectCard2 = (id) => over('cards', markAsSelected(id)) console.log(
JSON.stringify(
selectCard2('green-square')(state),
null,
2
)
)*/

[Functional Programming] Combine State Dependent Transactions with the State ADT (composeK to replace multi chian call)的更多相关文章

  1. [Functional Programming] Read and Transform Values from a State ADT’s State (get)

    Many times we need to access and transform state, either in part or in full, to be used when calcula ...

  2. [Functional Programming] Combine Multiple State ADT Instances with the Same Input (converge(liftA2(constant)))

    When combining multiple State ADT instances that depend on the same input, using chain can become qu ...

  3. [Functional Programming Monad] Combine Stateful Computations Using Composition

    We explore a means to represent the combination of our stateful computations using familiar composit ...

  4. [Functional Programming Monad] Modify The State Of A State Monad

    Using put to update our state for a given state transaction can make it difficult to modify a given ...

  5. [Functional Programming Monad] Map And Evaluate State With A Stateful Monad

    We explore our first stateful transaction, by devising a means to echo our state value into the resu ...

  6. [Functional Programming] Introduction to State, thinking in State

    Recently, I am learning Working with ADT. Got some extra thought about State Monad. Basiclly how to ...

  7. [Functional Programming ADT] Create State ADT Based Reducers (applyTo, Maybe)

    The typical Redux Reducer is function that takes in the previous state and an action and uses a swit ...

  8. [Functional Programming ADT] Adapt Redux Actions/Reducers for Use with the State ADT

    By using the State ADT to define how our application state transitions over time, we clear up the ne ...

  9. [Functional Programming] Rewrite a reducer with functional state ADT

    For example we have a feature reducer like this: // selectCard :: String -> Action String export ...

随机推荐

  1. java8 获取对象中满足条件的金额之和

    记录一个小笔记:获取一个对象中,支付成功的金额之和: Long sum = list.stream().filter(o -> o.getStatus() == SUCCESS).mapToLo ...

  2. Visual Studio中的/MD, /MT, /MDd, /MTd 选项

    Visual Studio中/MD, /MT, /MDd, /MTd表示多线程模块是否为dll.对于这几个选项我的理解如下: /MD: 定义了_MT和_DLL,让程序用多线程和dll版本的运行库. / ...

  3. Linux下hdparm硬盘测速

    在Linux下可以使用hdparm对硬盘进行测试或者查看硬盘的相关信息.这样你就知道了硬盘读写速度. Hdparm功能说明:显示与设定硬盘的参数. 语 法:hdparm [-CfghiIqtTvyYZ ...

  4. centos 7 服务器网卡做bond

    前期环境准备 [root@ /root] alibaba cloud#cat /etc/redhat-releaseCentOS Linux release 7.4.1708 (Core)[root@ ...

  5. Nodejs express框架 浅析

    http://www.expressjs.com.cn/ 1. 中间件 ①挂载中间件的函数:app.use var http = require('http'); var express = requ ...

  6. 关于__GNU_SOURCE 这个宏---如何开启【转】

    关于__GNU_SOURCE 这个宏 转自:http://blog.csdn.net/stevenliyong/article/details/4160181 版权声明:本文为博主原创文章,未经博主允 ...

  7. vim的最最基本配置

    全部用户生效 /etc/vimrc 当前用户生效 ~/.vimr # 1.设置语法高亮syntax on # 2.显示行号 set nu # 3.设置换行自动缩进为4个空格 # 4.设置tab缩进为空 ...

  8. C#的Convert.FromBase64String

    Invalid length for a Base-64 char array. 异常信息 引用https://stackoverflow.com/questions/2925729/invalid- ...

  9. 异步 JavaScript 之理解 macrotask 和 microtask(转)

    这个知识点... https://blog.keifergu.me/2017/03/23/difference-between-javascript-macrotask-and-microtask/? ...

  10. Codeforces Round #449 (Div. 2) A. Scarborough Fair【多次区间修改字符串】

    A. Scarborough Fair time limit per test 2 seconds memory limit per test 256 megabytes input standard ...