redux深入理解之中间件(middleware)

最新推荐文章于 2022-04-07 23:04:37 发布

萌萌的卡洛奇

最新推荐文章于 2022-04-07 23:04:37 发布

阅读量2.1k

点赞数 1

分类专栏： javascript 文章标签： redux javascript

本文链接：https://blog.csdn.net/yuzhongzi81/article/details/77436778

版权

本文详细介绍了Redux中间件的工作原理，从reduce函数的基础讲解到Redux中compose函数的应用，揭示了middleware如何处理异步操作。通过实例分析了middleware如何包装dispatch，使得能够处理异步action，并探讨了thunkMiddleware在处理异步操作中的关键作用。

摘要由CSDN通过智能技术生成

本文代码请看本人github，https://github.com/Rynxiao/redux-middleware

关于redux运用，请看之前一篇文章http://blog.csdn.net/yuzhongzi81/article/details/51880577

理解`reduce`函数

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

arr.reduce([callback, initialValue])

关于reduce的用法，这里不再做多述，可以去这里查看

看如下例子：

let arr = [1, 2, 3, 4, 5];

// 10代表初始值，p代表每一次的累加值，在第一次为10
// 如果不存在初始值，那么p第一次值为1
// 此时累加的结果为15
let sum = arr.reduce((p, c) => p + c, 10);  // 25

// 转成es5的写法即为：
var sum = arr.reduce(function(p, c) {
   
    console.log(p);
    return p + c;
}, 10);

下面我们再来看一个reduce的高级扩展。现在有这么一个数据结构，如下：

let school = {
    name: 'Hope middle school',
    created: '2001',
    classes: [
        {
            name: '三年二班',
            teachers: [
                { name: '张二蛋', age: 26, sex: '男', actor: '班主任' },
                { name: '王小妞', age: 23, sex: '女', actor: '英语老师' }
            ]
        },
        {
            name: '明星班',
            teachers: [
                { name: '欧阳娜娜&#