zoukankan      html  css  js  c++  java
  • [Ramda] Refactor to Point Free Functions with Ramda using compose and converge

    In this lesson we'll take some existing code and refactor it using some functions from the Ramda library, most notably, compose and converge. When we're done, we'll have taken a function with a couple of local variables and parameter references and converted it into more streamlined "point-free" or "tacit" functions.

    For example, we have following function:

    const R = require('ramda');
    
    const person = {
        id: 1,
        name: 'Joe'
    };
    
    const generateUrl = (id) => `http://img.soicalnetwork.com/avatar/${id}.png`;
    const getUpdatedPerson = (person) => {
        const url = generateUrl(person.id);
        return R.assoc('avatar', url, person);
    }  
    const result = getUpdatedPerson(person);

    It will add a 'avatar' prop to person object.

    We want to refactor the code to make it point free style, we the functions can be more reuseable and easy to understand.

    First try:

    //===============================================
    // #1 Refactoring
    //===============================================
    /*
     Solve the problem that when id is undefined, we need a default image
     Solution: propOr('defaultValue', 'prop')
     */
    
    const generateUrl = (id) => `http://img.soicalnetwork.com/avatar/${id}.png`;
    const getUpdatedPerson = (person) => {
        const url = generateUrl(R.propOr('default', 'id')(person));
        return R.assoc('avatar', url, person);
    }  
    const result = getUpdatedPerson(person);
    console.log(result);

    Here we use 'R.propOr', to get prop of an object and set default fallback value. This can help us prevent undefined problem.

    Second try:

    //===============================================
    // #2 Refactoring
    //===============================================
    /**
     * Extra a single function to get Person url.
     * Solution: Here we using R.compose.
     * SO getURLFromPerson is point-free function.
     */
    
    const generateUrl = (id) => `http://img.soicalnetwork.com/avatar/${id}.png`;
    const getURLFromPerson = R.compose(
        generateUrl,
        R.propOr('default', 'id')
    );
    const getUpdatedPerson = (person) => R.assoc('avatar', getURLFromPerson(person), person);
    const result = getUpdatedPerson(person);
    console.log(result);

    Here we use 'R.compose' to make 'getURLFromPerson' as a point-free function. Notice in the function, we no longer need to pass 'person' object as a param.

    Third try:

    //===============================================
    // #3 Refactoring
    //===============================================
    /**
     * In getUpdatedPerson function, we still relay on the 'person' param we pass in.
     * We want to make it a point-free function also.
     * Solution: we can use R.converge
     */
    const generateUrl = (id) => `http://img.soicalnetwork.com/avatar/${id}.png`;
    const getURLFromPerson = R.compose(
        generateUrl,
        R.propOr('default', 'id')
    );
    // const getUpdatedPerson = (person) => R.assoc('avatar', getURLFromPerson(person), person);
    const getUpdatedPerson = R.converge(
        R.assoc('avatar'),
        [
            getURLFromPerson,
            R.identity
        ]
    )
    const result = getUpdatedPerson(person);
    console.log(result);

    The old verson of 'getUpdatedPerson' relay on 'person' param, to make it as point-free function style, we can use another way 'R.converge'.

  • 相关阅读:
    LeetCode-46. Permutations
    LeetCode-40. Combination Sum II
    LeetCode-39. Combination Sum
    剑指offer-数组中的逆序对
    LeetCode-295. Find Median from Data Stream
    LeetCode-268. Missing Number
    LeetCode-515. Find Largest Value in Each Tree Row
    GIS技术在采矿与勘探中的应用
    JavaScript 跨域总结与解决办法giserdqy.com
    JavaScript 跨域总结与解决办法giserdqy.com
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6402486.html
Copyright © 2011-2022 走看看