redux源码解读--compose源码解析

lk20150415 发布于2019-08-21 17:28 / 1287人阅读

摘要：源码解析模块的代码十分简练，但是实现的作用却是十分强大。只传递一个参数的时候，就直接把这个函数返回返回组合函数这就是对源码的一个整体解读，水平有限，欢迎拍砖。后续的源码解读和测试例子可以关注源码解读仓库

compose源码解析

compose模块的代码十分简练，但是实现的作用却是十分强大。redux为何称为redux？有人说就是reduce和flux的结合体，而reduce正是compose模块的核心。

compose模块所实现的功能强大而简单：从右到左,组合参数(函数)。所以，传递给compose方法的参数，必须都是函数类型的(这一点，在源码中没有判断，可能是因为这个模块是redux内部使用的模块，没有对外暴露，所以不需要很强的校验。)。例如：

 compose(f, g, h) ====> (...args) => f(g(h(...args)))

模块的代码很简单，但是涉及到的内容却很重要，下面一点一点的看。

reduce是什么？

reduce是es5中的数组的一个方法，对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。函数签名为：

arr.reduce(callback[, initialValue])

callback是执行数组中每个元素的函数，这个函数接收几个参数：

accumulator:上一次callback调用的返回值，如果是第一次调用，则这个值就是initialValue。如果没有提供initialValue则使用数组的第一个元素。

currentValue: 数组正在处理的元素

currentIndex: 数组正在处理的元素的当前的索引

array: 调用reduce方法的数组

综上，reduce方法详细的签名就是：

arr.reduce(function (accumulator, currentValue, currentIndex, array) {}[, initialValue])

几个小Demo

数组求和

[1,2,3,4,5].reduce((a, b) => a + b) // 15

数组拉平

[[0, 1], [2, 3], [4, 5]].reduce((a, b) => {
  return a.concat(b);
}, []);  // [ 0, 1, 2, 3, 4, 5 ]

关于reduce详细的文档可以参考Array.prototype.reduce

明白了reduce是怎么回事之后，我们先来看一下compose有什么神奇的效果：

import compose from "../src/compose"

// function f
const f = (arg) => `函数f(${arg})` 

// function g
const g = (arg) => `函数g(${arg})`

// function h 最后一个函数可以接受多个参数
const h = (...arg) => `函数h(${arg.join("_")})`

const r = compose(f, g, h)

console.log(typeof r) // function

console.log(r(1,2,3)) //函数f(函数g(函数h(1_2_3)))

从上面可以的代码可以看出：compose的运行结果是一个函数，调用这个函数所传递的参数将会作为compose最后一个参数的参数，从而像"洋葱圈"似的，由内向外，逐步调用。

源码

export default function compose(...funcs) {
  // funcs是一个保存着所有参数函数的数组
  // 如果没有传递任何参数，就返回一个函数，这个函数是输入什么得到什么。
  if (funcs.length === 0) {
    return arg => arg
  }
  // 只传递一个参数的时候，就直接把这个函数返回
  if (funcs.length === 1) {
    return funcs[0]
  }
  // 返回组合函数
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

这就是对compose源码的一个整体解读，水平有限，欢迎拍砖。后续的源码解读和测试例子可以关注：redux源码解读仓库

云服务器 GPU云服务器 redux源码源码解读 webrtc源码解读 webrtc fec源码解读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89558.html

redux源码解读--applyMiddleware源码解析

摘要：的中间件主要是通过模块实现的。返回的也是一个对象这个其实就是，各个中间件的最底层第三层的哪个函数组成的圆环函数构成的这就是对源码的一个整体解读，水平有限，欢迎拍砖。后续的源码解读和测试例子可以关注源码解读仓库 applyMiddleware源码解析中间件机制在redux中是强大且便捷的，利用redux的中间件我们能够实现日志记录，异步调用等多种十分实用的功能。redux的中间件主要是...

Atom 2019-08-22 13:35 评论0 收藏0
Redux 入坑进阶 - 源码解析

摘要：否则的话，认为只是一个普通的，将通过也就是进一步分发。在本组件内的应用传递给子组件源码解析期待一个作为传入，里面是如果只是传入一个，则通过返回被绑定到的函数遍历并通过分发绑定至将其声明为的属性之一接收的作为传入。原文链接：https://github.com/ecmadao/Co...转载请注明出处本文不涉及redux的使用方法，因此可能更适合使用过redux的玩家翻阅? 预热...

BothEyes1993 2019-08-20 11:09 评论0 收藏0
redux源码阅读－－主模块

摘要：主模块的入口模块就是。主要就做两件事引入个功能模块，并挂载至同一个对象上，对外暴露。在非环境下压缩代码，给予警告。后续的源码解读和测试例子可以关注源码解读仓库主模块 redux的入口模块就是src/index.js。这个文件的代码十分简单。主要就做两件事：引入个功能模块，并挂载至同一个对象上，对外暴露。在非production环境下压缩代码，给予警告。下面是模块的源码(只包...

testHs 2019-08-21 17:23 评论0 收藏0
重读redux源码(二)

摘要：函数组合，科里化的串联结合示例源码，实现也很优雅，对于返回的，将等参数传递进去，然后执行，等待回调异步完成再。对于正常对象则进行下一步。前言作为前端状态管理器，这个比较跨时代的工具库redux有很多实现和思想值得我们思考。在深入源码之前，我们可以相关注下一些常见问题，这样带着问题去看实现，也能更加清晰的了解。常见问题大概看了下主要有这么几个： redux三大原则这个可以直接参考...

dingda 2019-05-23 13:54 评论0 收藏0
不一样的redux源码解读

摘要：这里还有一个疑问点就是的嵌套，最开始也我不明白，看了源码才知道，这里返回的也是接受也就是一个所以可以正常嵌套。以作为参数，调用上一步返回的函数以为参数进行调用。 1、本文不涉及redux的使用方法，因此可能更适合使用过 redux 的同学阅读2、当前redux版本为4.0.13、更多系列文章请看 Redux作为大型React应用状态管理最常用的工具。虽然在平时的工作中很多次的用到了它...

Salamander 2019-08-26 13:34 评论0 收藏0