[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 ...
随机推荐
- Word 查找替换高级玩法系列之 -- 替换手机号中间几位数字
1.打开"查找和替换"对话框.切换到"开始"选项卡,在"编辑"组中选择"替换".或者按下快捷键"Ctrl+H& ...
- egret 微信小游戏 错误
1,使用jszip错误 (1) t.createElementNS is not a function 修改:webapp-adapter.js,增加一个方法 createElementNS: f ...
- 02 servlet基础 生命周期 tomcat web.xml
新建web项目 – new Web Project – 选择:javaee 5.0 建包 – com.gzsxt.wang 新建class:FirstServlet – 继承:HttpServlet( ...
- 解决Cannot change version of project facet Dynamic web module to 2.5(转)
我们用Eclipse创建Maven结构的web项目的时候选择了Artifact Id为maven-artchetype-webapp,由于这个catalog比较老,用的servlet还是2.3的,而一 ...
- 微软发布云端基因服务:推动AI驱动的精准医疗
微软发布云端基因服务:推动AI驱动的精准医疗 2018年03月07日 00:00:00 微软研究院AI头条 阅读数:117 版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...
- opencv-03--图像的算术运算
图像的算术运算 Mat类把很多算数操作符都进行了重载,让它们来符合矩阵的一些运算,如果+.-.点乘等. 下面我们来看看用位操作和基本算术运算来完成colorReduce程序,它更简单,更高效. 将25 ...
- Express无法解析POST请求的JSON参数
在用Express和MongoDB搭建后端开发环境时,可能会利用测试工具发送带有JSON格式数据的POST请求,那么这时就要利用request.body获取json数据,但此时可能遇到json无法解析 ...
- 关于微信小程序的父子组件互相传值
一:父组件传值给子组件 1. 在父组件中引用子组件 1.1 在父组件json中导入子组件 1.2 在子组件的json中,把自己定义为子组件 2. 在父组件中,子组件的引用处,绑定一个属性( text ...
- jQuery组件封装之return this.each(function () {});
记录一下自己的调试历程 组件封装经常看到这么一段代码 $.fn.plugin = function (options) { return this.each(function (i,t) { new ...
- Java 之 Collections 工具类
一.Collections 概述 java.utils.Collections 是集合工具类,用来对集合进行操作. 二.常用方法 public static <T> boolean add ...