[Functional Programming] Using ComposeK for both get State and modify State
We have State like this:
const state = {
cards: [
{ id: "green-square", color: "green", shape: "square" },
{ id: "orange-square", color: "orange", shape: "square" },
{ id: "blue-triangle", color: "blue", shape: "triangle" }
],
hint: {
color: "green",
shape: "square"
},
isCorrect: null,
};
We want to validate user's input is the same as 'hint' and it matchs 'id' in cards array. Then we want to set 'isCorrect' to 'false' or 'true'.
In this flow, we want to do two things:
- Able to set state, which is 'isCorrect'
- Able to get multi states, 'cards', 'hint', and validate they are matched
- In the end, we need to get the result from Step 2 to set value in Step 1
In this kind of flow, we can use 'composeK' all the way down.
Able to set state:
// over :: (String, (a -> b)) -> Object -> State Object ()
const over = (key, fn) => modify(mapProps({ [key]: fn }));
// setIsCorrect :: Boolean -> State AppState ()
const setIsCorrect = isCorrect => over("isCorrect", constant(isCorrect));
Able to get multi state:
// getState :: String -> State Object (Maybe a)
const getState = key => get(prop(key)); // Hint :: {color: String, shape: String}
// Card :: {id: String, color: String, shape: String} // getHint :: () -> State AppState Hint
const getHint = () =>
getState("hint").map(option({ color: "unknown", shape: "unknown" })); // getCard :: String -> State AppState Card
const getCard = id =>
getState("cards")
.map(chain(find(propEq("id", id))))
.map(option({ id, color: "unknown", shape: "unknown" }));
Able to validate:
// liftState :: (a -> b) -> a -> State s b
const liftState = fn =>
compose(
State.of,
fn
); // cardToHint :: Card -> State AppState Hint
const cardToHint = composeK(
liftState(omit(["id"])),
getCard
); // validateAnswer :: String -> State AppState Boolean
const validateAnswer = converge(liftA2(equals), cardToHint, getHint);
Do both Get and Set state:
const feedback = composeK(
setIsCorrect,
validateAnswer
);
---
const state = {
cards: [
{ id: "green-square", color: "green", shape: "square" },
{ id: "orange-square", color: "orange", shape: "square" },
{ id: "blue-triangle", color: "blue", shape: "triangle" }
],
hint: {
color: "green",
shape: "square"
},
isCorrect: null,
left: ,
moves:
}; log(feedback("green-square").execWith(state));
[Functional Programming] Using ComposeK for both get State and modify State的更多相关文章
- [Functional Programming] Transition State based on Existing State using the State ADT (liftState, composeK)
While sometimes outside input can have influence on how a given stateful transaction transitions, th ...
- [Functional Programming] Combine State Dependent Transactions with the State ADT (composeK to replace multi chian call)
When developing a Finite State Machine, it is often necessary to apply multiple transitions in tande ...
- [Functional Programming] Pull Many Random Numbers in a Single State ADT Transaction
We have the ability to select a single random card from a pile of twelve cards, but we would like to ...
- [Functional Programming] Randomly Pull an Item from an Array with the State ADT (Pair)
Functor composition is a powerful concept that arises when we have one Functor nested in another Fun ...
- [Functional Programming + React] Provide a reasonable default value for mapStateToProps in case initial state is undefined
For example we have a component, it needs to call 'react-redux' connect function. import { compose, ...
- [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 ...
- [Functional Programming ADT] Initialize Redux Application State Using The State ADT
Not only will we need to give our initial state to a Redux store, we will also need to be able to re ...
- [Functional Programming Monad] Combine Stateful Computations Using A State Monad
The true power of the State ADT really shows when we start combining our discrete, stateful transact ...
- [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 ...
随机推荐
- [DEBUG] ubuntu mysql root@localhost改了密码还是进不去ERROR 1698 (28000)
之前用skip-grant-tables的方法免密进入Mysql,修改了root的密码, 当时重启服务后是可以用密码进入Mysql的.结果昨天突然又进不去了:) 所以更换方法,特此记录. ====== ...
- BFC的作用及其应用
简单介绍BFC BFC 就是块级格式化上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响. 创建 BFC 的方式有: 1.html的根元素 2. ...
- 正则与re模块
一.正则表达式 在线测试工具 http://tool.chinaz.com/regex/ 1.字符组 在同一个位置可能出现的各种字符组成一个字符组,在正则表达中用[ ]表示 一个正则就是一条匹 ...
- 无线网卡SP-WL450U的驱动问题
修改win10的设备驱动为需要的驱动,SP-WL450U的驱动问题 解决SP-WL450U的驱动问题,在电脑上安装无线网卡后,总是用不上5G信号,只能选择2.4G.重新安装程序后也不行,在反复试用后发 ...
- python学习-17 列表list 2
# 1. 选择嵌套列表里的元素(内部进行了for循环) li = [1,2,",45]],"abc",True] a = li[3][2][1] print(a) 运行结 ...
- 1267: 展开字符串(Java)
WUSTOJ 1267: 展开字符串 参考 jamesMusk的博客--Java 判断字符是大写小写或者数字 Description 给三个参数a1,a2,a3和一个字符串,请按以下要求展开该字符 ...
- sublime text 2 + Dev-C++/MinGW 组合配置更方便快捷的 C/C++ 编译环境
首先看一下配置后的效果: 1.直接在底部文本框中显示运行结果(不需要从键盘输入的时候使用): 2.在cmd中运行结果(需要从键盘输入的时候使用): 快捷键说明: 运行: 在底部文本栏显示结果:Ctrl ...
- Django-redis配置cache和session
CACHES = { "default": { "BACKEND": "django_redis.cache.RedisCache", &q ...
- Optional 理解
目录 Optional 理解 1. 含义 2. Optional 类中方法 3. Optional 对象不应该作为方法参数 Optional 理解 1. 含义 Optional 是一个容器对象,该容器 ...
- C# EntityCollection 和 List 互转
private EntityCollection<T> ToEntityCollection<T>(this List<T> list) where T : cla ...