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. [数据结构] - ArrayList探究

    一 概述 ArrayList可以理解为动态数组,与java的数组相比,它的容量能动态曾长,ArrayList是List接口的可变数组的实现,允许包括null值在内的所有元素.除了实现List接口外,此 ...

  2. WUST 设计模式 实验一 单例模式的应用

    实验一 单例模式的应用 实验目的 1.掌握单例模式(Singleton)的特点: 2.分析具体问题,使用单例模式进行设计. 实验内容和要求 很多应用项目都有配置文件,这些配置文件里面定义一些应用需要的 ...

  3. IntelliJ Idea基于Maven创建SpringMVC程序

    1. 创建Maven工程 网上很多资料,不再详细介绍,请参看IntelliJ IDEA 创建 hello world Java web Maven项目从头到尾都有图有真相2017版本 有关settin ...

  4. 复杂链表的复制——牛客offer

    题目描述: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用, ...

  5. (二)shiro之jsp标签

    一.介绍 <%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %> Guest ...

  6. JavaScript检测浏览器

    Detect Browser <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  7. Tomcat 和web 服务器配置

    mkdir /usr/local/tomcat # cd /usr/local/tomcat # tar -zxvf /software/apache-tomcat-7.0.54.tar.gz 生成链 ...

  8. java 框架-分布式服务框架1ZooKeeper

    https://www.cnblogs.com/felixzh/p/5869212.html Zookeeper的功能以及工作原理   1.ZooKeeper是什么?ZooKeeper是一个分布式的, ...

  9. 踩坑记录-nuxt引入vuex报错store/index.js should export a method that returns a Vuex instance.

    错误 store/index.js代码如下: import Vue from 'vue'; import Vuex from 'vuex'; import city from './moudle/ci ...

  10. vue-cli搭建vue项目环境

    该篇文章是继https://www.cnblogs.com/qing-5/p/11321585.html来写 1.打开终端,输入指令"npm install --global vue-cli ...