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));
  • 相关阅读:
    注意技巧小结
    小数点转百分比
    Mysql 性能监控及调优
    Linux下快速安装Mysql及使用
    如何建立压力计算模型
    Redis 2种持久化模式的缺陷
    Redis性能调优建议
    Node.js学习入门手册
    手机APP脚本录制(LoadRunner 12)
    Linux系统内核性能调优
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11156862.html
Copyright © 2011-2022 走看看