[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 ...
随机推荐
- C++:标准模板库vector
一:介绍 vector是C++标准模板库,是一个容器,底层是数组,为连续内存. 命名空间为std,所属头文件为<vector> 注意:不是<vector.h> vector ...
- C++基础--函数重载
函数重载定义: 在相同的作用域中具有相同的函数名而函数形参列表(参数类型.参数个数.参数顺序)不同的两个函数,称之为函数重载.注意:函数返回值类型并不是重载的条件. 函数重载优点: 可以使用相同的函数 ...
- JS 定时器/延时器
定时器 创建定时器 window.setInterval(方法类型,间隔时间(1000=1秒)) var timer=window.setInterval(func,2000); var i=0 ...
- Winscp隧道实现-跳板机/跨机连接
隧道用的是公网ip,登陆用的是私网ip 一张图应该就能看懂,后续用到新的功能继续编辑
- Python开发【杂货铺】:作用域的痛点
1.块级作用域 想想此时运行下面的程序会有输出吗?执行会成功吗? #块级作用域 if 1 == 1: name = "lzl" print(name) for i in range ...
- 【数据结构】洛谷2019 OI春令营 - 普及组 作业
[P3662][USACO17FEB]Why Did the Cow Cross the Road II S 求解连续的k个数的最大值,利用前缀和维护即可. #include<bits/stdc ...
- SAS学习笔记13 SAS数据清洗和加工(续)
查找缺失值 cha[*]和num[*]是建立数组cha和num,但不指定数组中的元素数 自动变量_character_表示数据集中的所有字符型变量 自动变量_numeric_表示数据集中的所有数值型变 ...
- C语言之反汇编揭秘
title: 'C语言之反汇编揭秘' tags: 汇编与反汇编 categories: 汇编与反汇编 copyright: true abbrlink: 'b1c9' date: 2019-09-07 ...
- (十二) web服务与javaweb结合(3)
一.需求 上一章节虽然将webservice和web项目绑定在了一起,但是还是不能共同一个端口,本章讲解webservice和web项目绑定且共同端口. 二.案例 2.1 创建web工程,并引入依赖 ...
- IQueryable vs. IEnumerable
IQueryable<T> extends the IEnumerable<T> interface IEnumerable<T> is great for wor ...