[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 ...
随机推荐
- Yii错误异常处理
目录 背景 web错误处理 console错误处理 背景 当程序中出现不可预期的错误,比如说除0异常,yii会给我们扔出这个异常信息,由于现在都是读写分离,客户端调你的api,都是协商好的数据格式,如 ...
- Mysql slave 延迟故障一列(无主键)
首先还是给出我见过的一些延迟可能: 大事物延迟 延迟略为2*执行时间 状态为:reading event from the relay log 大表DDL延迟 延迟略为1*执行时间 状态为:alter ...
- java获取端口号,不用request
Integer port = null; MBeanServer mBeanServer = null; List<MBeanServer> mBeanServers = MBeanSer ...
- maftools | 从头开始绘制发表级oncoplot(瀑布图)
本文首发于微信公众号 **“ 生信补给站 ”** ,期待您的关注!!! 原文链接:https://mp.weixin.qq.com/s/G-0PtaoO6bYuhx_D_Rlrlw 对于组学数据的分析 ...
- Android 自定义控件之 日期选择控件
效果如下: 调用的代码: @OnClick(R.id.btn0) public void btn0() { final AlertDialog dialog = new AlertDialog.Bui ...
- .net core下对于Excel的一些操作及使用
原文:.net core下对于Excel的一些操作及使用 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.cs ...
- 一个简单的window.onscroll实例
鉴于better-scroll实现这个效果很复杂,想用最原生的效果来实现吸顶效果 一个简单的window.onscroll实例,可以应用于移动端 demo 一个简单的window.onscroll实例 ...
- Go map使用
前言 map 是在 Go 中将值(value)与键(key)关联的内置类型.通过相应的键可以获取到值. 在一个map里所有的键都是唯一的,而且必须是支持==和!=操作符的类型,切片.函数以及包含切片的 ...
- stm32 usart 串口
比特率是每秒钟传输二进制代码的位数,单位是:位/秒(bps).如每秒钟传送240个字符, 而每个字符格式包含10位(1个起始位.1个停止位.8个数据位),这时的比特率为: 10位 × 240个/秒 = ...
- 9.Redis的Java客户端Jedis
Redis的Java客户端Jedis Jedis所需jar包 commons-pool-1.6.jar jedis-2.1.0.jar 1.Jedis常用操作(jedis中的api 和 我们在 l ...