zoukankan      html  css  js  c++  java
  • [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 tandem. To accomplish this in most Redux work flows requires at best, implementing multiple action handlers in separate reducers; or at worse, the need to duplicate logic for similar action handlers, sometime across multiple files. However when using a State ADT, we can easily combine these independent transitions by simply chain-ing multiple discrete transitions into one transaction. We demonstrate this interface by transitioning two portions of related state with one transaction.

    const { curry, compose, State, mapProps, composeK } = require("crocks");
    
    const { modify } = State;
    
    const state = {
      left: 8,
      moves: 0
    };
    
    const inc = x => x + 1;
    const dec = x => x - 1;
    
    const clamp = (min, max) => x => Math.min(Math.max(min, x), max);
    const clampAfter = curry((min, max, fn) =>
      compose(
        clamp(min, max),
        fn
      )
    );
    const over = (key, fn) => modify(mapProps({ [key]: fn }));
    
    const limitMoves = clampAfter(0, 8);
    
    const decLeft = () => over("left", limitMoves(dec));
    const incMoves = () => over("moves", limitMoves(inc));
    
    // Then there are a series of chain functions, using composeK
    /**
     * replace: 
     *  decLeft()
     *      .chain(decLeft)
     *      .chain(decLeft)
     *      .chain(decLeft)
     *      .chain(incMoves)
     *      .chain(incMoves)
     */
    const applyMove = composeK(
        incMoves, incMoves, decLeft, decLeft, decLeft
    )
    
    const res = applyMove()
      .execWith(state);
    console.log(res); //{ left: 5, moves: 2 }

    Another example:

    const state = {
        cards: [
            {id: 'green-square', color: 'green', shape: 'square'},
            {id: 'orange-square', color: 'orange', shape: 'square'},
            {id: 'blue-square', color: 'blue', shape: 'triangle'}
        ],
        left: 8,
        moves: 0
    }
    
    const {State, when, assign, map, mapProps, propEq} = require('crocks');
    const {modify} = State;
    
    const markSelected = id => assignBy(propEq('id', id), {selected: true})
    const assignBy = (pred, obj) => when(pred, assign(obj));
    const over = (key, fn) => modify(mapProps({ [key]: fn }));
    
    const selectCard = id => over('cards', map(markSelected(id)))
    
    
    
    console.log(
        JSON.stringify(
            selectCard('green-square').execWith(state),
            null,
            2
        )
    );
    
    
    /*
    // Using Ramda to implememnt the same logic
    const {compose, map, propOr, when, propEq, mergeLeft} = require('ramda');
    
    const markAsSelected = (id) => when(propEq('id', id), mergeLeft({selected: true}))
    const over = (key, fn) => compose(map(fn), propOr([], key));
    
    const selectCard2 = (id) => over('cards', markAsSelected(id))
    
    console.log(
        JSON.stringify(
            selectCard2('green-square')(state),
            null,
            2
        )
    )*/
  • 相关阅读:
    js对象数组(JSON) 根据某个共同字段 分组
    一个 函数 用来转化esSearch 的range 条件
    关于 vuex 报错 Do not mutate vuex store state outside mutation handlers.
    android listview 重用view导致的选择混乱问题
    android SDK和ADT的更新
    Android中adb push和adb install的使用区别
    pycharm中添加扩展工具pylint
    su Authentication failure解决
    Putty以及adb网络调试
    有关android源码编译的几个问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10235148.html
Copyright © 2011-2022 走看看