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:

  1. Able to set state, which is 'isCorrect'
  2. Able to get multi states, 'cards', 'hint', and validate they are matched
  3. 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的更多相关文章

  1. [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 ...

  2. [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 ...

  3. [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 ...

  4. [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 ...

  5. [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, ...

  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] 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 ...

  8. [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 ...

  9. [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 ...

随机推荐

  1. java--带参方法 递归阶乘

    package com.test.day01; // public class TestParam { public void f1(int n){ n =0; } public static voi ...

  2. Word 查找替换高级玩法系列之 -- 制表符对齐人工目录

    自己在Word中输入目录的时候是不是总也对不齐最右边的页码?这就是人工制作目录的不足之处了,但因着它能让我们更自由的发挥,所以还是得到了一些人的偏爱.那么问题来了,到底要怎么对齐这种人工目录呢? 1. ...

  3. Python 安装包时选择 python版本

    安装了两个版本的python 其中一个版本为2.7 专门为python 2.7安装包使用的语句为 升级pip E:\Python27\python -m pip install --upgrade p ...

  4. Typora 的使用

    一. Typora的markdown语法 1.标题 使用简单的ctr+数字健,就可以快速完成各种级别的标题 #一阶标题 或者快捷键Ctrl+1 ##二阶标题 或者快捷键Ctrl+2 ##二阶标题 或者 ...

  5. 处理bugs心法

    1. 前提 第一层:遇到异常首先必须告诉自己,冷静,不要慌.(一看到Bug就心慌,那么武功就施展不了了) 2. 入门级 第二层:遇到Bug,第一潜意识看输出异常的信息的(控制台输出,Junit输出,页 ...

  6. IDEA中通过Maven插件使用MyBatis Generator

    这样做更简单,参考: IDEA集成MyBatis Generator 插件 详解

  7. 此项目与Visual Studio的当前版本不兼容的报错

    问题再现:程序是用visual studio 2013开发的,放在本地运行报此项目与Visual Studio的当前版本不兼容.本地是visual studio 2010. 解决办法: <1&g ...

  8. ROUTE: route addition failed

    ROUTE: route addition failed 1)报FlushIpNetTable failed on interface错误 应对:以管理员身份运行OpenV-P-N 2)报Warnin ...

  9. A*算法与8数字谜题(参见《算法》P226习题2.5.32)

    A*算法的目的是找到一条从起始状态到最终状态的最短路径. 在A*算法中,需要在每个点计算启发函数:f(S) = g(S) + h(S),其中g(S)是从起点到S点的距离,h(S)是对从S点到终点的最短 ...

  10. Java 面向对象(一)面向对象思想

    一.面向对象思想 1.概述 Java语言是一种面向对象的程序设计语言,而面向对象思想是一种程序设计思想,我们在面向对象思想的指引下,使用Java语言去设计.开发计算机程序. 这里的对象泛指现实中一切事 ...