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. 接下来打算写一下visual stuido 2013使用git进行远端管理。

    虽然我有了vs的账号,也vs2013开始已经可以进行远端的账户管理了,可是vs的版控毕竟有些依赖vs,想想还是用git吧 今天把这个环境的整套都弄地基本熟了.记录一下,算是一个小结.开始搭建系统框架

  2. fatal error LNK1104: 无法打开文件“LIBC.lib”错误(转)

    原文转自 http://blog.csdn.net/qq1028850792/article/details/41546043 方法一: 用VS2005重新编译某个工程的发生了链接错误,现在把这个解决 ...

  3. BEE网站

    http://www.bee-framework.com/ http://syxiaqj.github.io/2014/02/28/bee-learning-1/#0-tsina-1-24637-39 ...

  4. glPixelStorei(GL_UNPACK_ALIGNMENT, 1)用法

    http://www.cnblogs.com/sunnyjones/articles/798237.html 這個函数是對應著 glDrawPixels 而來的, 因為效率考慮, 所以, OpenGL ...

  5. C++嵌套类及对外围类成员变量的访问

    C++嵌套类及对外围类成员变量的访问 在一个类中定义的类称为嵌套类,定义嵌套类的类称为外围类. 定义嵌套类的目的在于隐藏类名,减少全局的标识符,从而限制用户能否使用该类建立对象.这样可以提高类的抽象能 ...

  6. Linux 根据组来划分账号,根据部门同一账号的组,同一组下拥有同一权限

    #新机器添加 #创建部门组与账号 useradd testgroup #创建员工账号加入到部门组里 useradd -g testgroup user1 #员工在/data目录下创建的默认权限为774 ...

  7. 我使用的Sublime插件及配置

    我使用的Sublime插件及配置 增强型插件 Package Control 快捷键ctrl+~,调出命令行,运行: import urllib.request,os,hashlib; h = '29 ...

  8. 阿里云服务器上使用apt-get install出现404 Not Found

    阿里云服务器上使用apt-get install出现404 Not Found 刚申请了的阿里云服务器,在其Ubuntu上用apt-get install安装软件时,会遇到 Failed to fet ...

  9. 【QC】安装

    QC不支持win8 1. 开启win8自带的IIS服务. 在控制面板-程序-启用或关闭Windows功能-Internet Information Service

  10. hdu 5138(水题)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5138 反着来. #include<iostream> #include<cstdi ...