zoukankan      html  css  js  c++  java
  • [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:

    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: 8,
      moves: 0
    };
    
    log(feedback("green-square").execWith(state));
  • 相关阅读:
    易语言常用源码
    ci的数据库地址
    格式化输出php数组
    mysql插入表情问题
    线程、进程与协程2
    线程、进程与协程
    if __name=='__main__"的作用
    动态导入模块
    面向对象补充之方法
    getpass模块
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11156862.html
Copyright © 2011-2022 走看看