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
        )
    )*/
  • 相关阅读:
    监听Windows消息
    把遇到过的对.Net线程的一些问题和误解集中起来和大家分享,也希望大家能一起补充,热烈欢迎讨论(转)
    推荐一个好工具:P/Invoke Interop Assistant (转)
    其它操作EDM的方式 (转载)
    DotNet(C#)自定义运行时窗体设计器 一
    通过监听Windows消息对复合控件进行整体控制(C#)一
    DotNet(C#)自定义运行时窗体设计器Runtime FormDesigner(转载)
    C# 枚举中的位运算
    Linux下cat 命令
    小端字节序与大端字节序
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10235148.html
Copyright © 2011-2022 走看看