前言

在前面的基礎篇中我們講解了createStore,bindActionCrearoes,combineReducers,在高級篇講解了applyMiddleware,致此redux相關的5個API就剩下一個compose，之所以把compose單獨寫一篇文章的原因是因為是compose五個API里唯一一個能單獨拿出來用的函數，就是函數式編程里常用的組合函數，和 redux 本身沒有什么多大關系。

compose的作用

把復雜的多函數嵌套調用，組合成純粹的函數調用，實現fn1(fn2(fn3(fn3(...args))))-->compose(fn1,fn2,fn3,fn4)(...args)這樣單純可讀的函數調用方式

舉例說明

let { compose } = require('redux'); function add1(str) {return '1' + str; } function add2(str) {return '2' + str; } function add3(str) {return '3' + str; } function add4(str) {return '4' + str; } let result = add1(add2(add3(add4('GuYan')))); console.log(result); // '1234GuYan' console.log(compose(add1,add2,add3,add4)('GuYan')); // '1234GuYan' 復制代碼

• 執行分析
  • 【1】componse執行返回一個函數
  • 【2】componse的參數為函數，返回的函數執行的時候實現了參數函數從右向左依次執行且每一個參數函數執行的結果為下一參數函數執行的入參，返回函數執行傳入的參數作為第一次執行的參數函數的入參
• 源碼實現

export default function compose(...funcs){// 如果參數沒傳,我們自己內部實現一個函數返回if(funcs.lenth === 0){return arg => arg}// 如果傳入的參數只有一個函數，直接返回該函數if(funv.length === 1){retrun funcs[0]}/*如果傳入的參數為多個函數，我們為了實現執行分析的【2】中的從右向左依次執行且每一個參數函數執行的結果為下一參數函數執行的入參，不難想到我們數組中的遍歷方法，沒錯就是reduce，但是reduce的遍歷是從左向右的，而我們要實現的是從右向左執行，所以我們選用reduceRight來實現*/return funcs.reduceRight((a,b)=>(...args)=>b(a(...args))); } 復制代碼

相信大家一定可以讀懂前面的源碼實現了(如果有不明白的地方歡迎下方留言)，但是細心的朋友們會發現真正的源碼的實現并不是用reduceRight而是reduce，所以我們結合源碼分析一遍我們的例子中代碼的執行過程

源碼分析

export default function compose(...funcs) {if (funcs.length === 0) {return arg => arg}if (funcs.length === 1) {return funcs[0]}return funcs.reduce((a, b) => (...args) => a(b(...args))) } 復制代碼

上面代碼片段是我直接從源碼中拷貝過來的，為了方便講解我們將箭頭函數修改成普通函數形式，結果如下

export default function compose(...funcs) {// 前兩種我就不復述了return funcs.reduce(function (a,b) {return function (...args) {return a(b(...args))}}) } 復制代碼

• 結合示例
  • 第一次迭代
    • 參數：add1，add2
    • 返回function fn1(...args1){return add1(add2(...args1))}
  • 第二次迭代
    • 參數：function fn1(...args1){return add1(add2(...args1))}，add3
    • 返回：function fn2(...args2){return (function fn1(...args1){return add1(add2(...args1))})(add3(...args2))}
    function fn2(...args2) {return (function fn1(...args1) {return add1(add2(...args1))})(add3(...args2)) } /* 源代碼執行的時候返回的是a執行傳入b執行返回的結構， 此時a是function fn1(...args1){return add1(add2(...args1))}，b是add3; 所以我用一個讓function fn1(...args1){return add1(add2(...args1))}自執行傳入add3(...args2), 需要注意的是此時函數中的args1就是add3(...args2) */ 復制代碼
  • 第三次迭代
    • 參數：function fn2(...args2){return (function fn1(...args1){return add1(add2(...args1))})(add3(...args2))}，add4
    • 返回：function fn3(...args3) {return (function fn2(...args2) {return (function fn1(...args1) {return add1(add2(...args1))})(add3(...args2))})(add4(...args3))}
    function fn3(...args3) {return (function fn2(...args2) {return (function fn1(...args1) {return add1(add2(...args1))})(add3(...args2))})(add4(...args3))} /* 此時a是function fn2(...args2){return (function fn1(...args1){return add1(add2(...args1))})(add3(...args2))}，b是add4(...args3);* 如第二次迭代一樣我們依據用一個自執行函數包裹a，且傳入參數`add4(...args3)`* 需要注意的是此時函數中的args2就是add4(...args3)*/ 復制代碼

第幾次循環a的值b的值返回的值

第一次	add1	add2	(...args1)=>(add1(add2(...args1)))
第二次	(...args1)=>(add1(add2(...args1)))	add3	(...args2)=>((...args1)=>(add1(add2(...args1))))(add3(...args2))即(...args2)=>add1(add2(add3(...args2)))
第三次	(...args)=>(add1(add2(add3(...args))))	add4	(...args3)=>((...args2)=>(add1(add2(add3(...args)))))(add4(...args3))即(...args)=>add1(add2(add3(add4(...args))))

轉載于:https://juejin.im/post/5ce973df51882521d51ec73b

總結

以上是生活随笔為你收集整理的Redux之compose的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。