深入理解redux之compose的具体应用

应用

最近给自己的react项目添加redux的时候，用到了redux中的compose函数，使用compose来增强store，下面是我在项目中的一个应用:

import {createStore,applyMiddleware,compose} from 'redux';
import createSagaMiddleware from 'redux-saga';
const sagaMiddleware = createSagaMiddleware();
const middlewares = [];

let storeEnhancers = compose(
  applyMiddleware(...middlewares,sagaMiddleware),
  (window && window .devToolsExtension) ? window .devToolsExtension() : (f) => f,
);

const store = createStore(rootReducer, initialState={} ,storeEnhancers);

上面这段代码可以让store与 applyMiddleware 和 devToolsExtension 一起使用。

reduce方法

在理解compose函数之前先来认识下什么是reduce方法？
官方文档上是这么定义reduce方法的：

reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其简化为单个值。

看下函数签名：

arr.reduce(callback[, initialValue])

callback

执行数组中每个值的函数，包含四个参数：

accumulator(累加器)
累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。

currentValue(当前值)
数组中正在处理的元素。

currentIndex可选（当前索引）
数组中正在处理的当前元素的索引。 如果提供了initialValue，则索引号为0，否则为索引为1。

array可选（数组）
调用reduce()的数组

initialValue可选（初始值）
用作第一个调用 callback的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初 始值的空数组上调用 reduce 将报错。

下面看一个简单的例子:

数组求和

var sum = [0, 1, 2, 3].reduce(function (a, b) {
 return a + b;
}, 0);
// sum 值为 6

这个例子比较简单，下面再看个稍微复杂点的例子，计算数组中每个元素出现的次数：

var series = ['a1', 'a3', 'a1', 'a5', 'a7', 'a1', 'a3', 'a4', 'a2', 'a1'];

var result= series.reduce(function (accumulator, current) {
  if (current in accumulator) {
    accumulator[current]++;
  }
  else {
    accumulator[current] = 1;
  }
  return accumulator;
}, {});

console.log(JSON.stringify(result));
// {"a1":4,"a3":2,"a5":1,"a7":1,"a4":1,"a2":1}

这个例子很巧妙的利用了数组的reduce方法，在很多算法面试题中也经常用到。这里需要注意的是需要指定initialValue参数。

通过reduce函数还可以实现数组去重：

var a = [1, 1, 2, 3, 4, 4, 5, 6, 6, 6, 7];
Array.prototype.duplicate = function() {
  return this.reduce(function(cal, cur) {
    if(cal.indexOf(cur) === -1) {
      cal.push(cur);
    }
    return cal;
  }, [])
}

var newArr = a.duplicate();

compose函数

理解完了数组的reduce方法之后，就很容易理解compose函数了，因为实际上compose就是借助于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)))
}

compose的返回值还是一个函数，调用这个函数所传递的参数将会作为compose最后一个参数的参数，从而像'洋葱圈'似的，由内向外，逐步调用。

看下面的例子：

import { compose } 'redux'；

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

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

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

console.log(compose(f,g,h)('a', 'b', 'c')) //函数f(函数g(函数h(a_b_c)))

所以最后返回的就是这样的一个函数 compose(fn1, fn2, fn3) (...args) = > fn1(fn2(fn3(...args))) 。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • react-redux中connect的装饰器用法@connect详解

    最近在琢磨react中的一些小技巧,这篇文章记录一下在redux中用装饰器来写connect. 通常我们需要一个reducer和一个action,然后使用connect来包裹你的Component.假设你已经有一个key为main的reducer和一个action.js. 我们的App.js一般都这么写: import React from 'react' import {render} from 'react-dom' import {connect} from 'react-redux' i

  • 详解react、redux、react-redux之间的关系

    本文介绍了react.redux.react-redux之间的关系,分享给大家,也给自己留个笔记,具体如下: React 一些小型项目,只使用 React 完全够用了,数据管理使用props.state即可,那什么时候需要引入Redux呢? 当渲染一个组件的数据是通过props从父组件中获取时,通常情况下是 A --> B,但随着业务复杂度的增加,有可能是这样的:A --> B --> C --> D --> E,E需要的数据需要从A那里通过props传递过来,以及对应的 E

  • 浅谈redux以及react-redux简单实现

    写在前头 redux 简介 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状态). 这些 state 可能包括服务器响应.缓存数据.本地生成尚未持久化到服务器的数据,也包括 UI 状态,如激活的路由,被选中的标签,是否显示加载动效或者分页器等等. 管理不断变化的 state 非常困难.如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,

  • react router4+redux实现路由权限控制的方法

    总体概述 一个完善的路由系统应该是这样子的,当链接到的组件是需要登录后才能查看,要能够跳转到登录页,然后登录成功后又跳回来之前想访问的页面.这里主要是用一个权限控制类来定义路由路由信息,同时用redux把登录成功后要访问的路由地址给保存起来,登录成功时看redux里面有没有存地址,如果没有存地址就跳转到默认路由地址. 路由权限控制类 在这个方法里面,通过sessionStorage判断是否登录了,如果没有登录,就保存一下当前想要跳转的路由到redux里面.然后跳转到我们登录页. import R

  • 微信小程序Redux绑定实例详解

    微信小程序Redux绑定实例详解 安装 clone或者下载代码库到本地: git clone https://github.com/charleyw/wechat-weapp-redux 将dist/wechat-weapp-redux.js(或者拷贝minify的也可以)文件直接拷贝到小程序的工程中,例如(下面假设我们把第三方包都安装在libs目录下): cd wechat-weapp-redux cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs

  • 详解如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构 Tips:与Redux无关的目录已省略 |--src |-- store Redux目录

  • 简单介绍react redux的中间件的使用

    用过react的同学都知道在redux的存在,redux就是一种前端用来存储数据的仓库,并对改仓库进行增删改查操作的一种框架,它不仅仅适用于react,也使用于其他前端框架.研究过redux源码的人都觉得该源码很精妙,而本博文就针对redux中对中间件的处理进行介绍. 在讲redux中间件之前,先用两张图来大致介绍一下redux的基本原理: 图中就是redux的基本流程,这里就不细说. 一般在react中不仅仅利用redux,还利用到react-redux: react-redux这里也不细说.

  • ReactNative中使用Redux架构总结

    本文介绍了ReactNative中使用Redux架构总结,分享给大家.具体如下: 使用Redux也有一段时间了.总结一下. 为什么要使用Redux? 背景: RN的state(可变,子组件不可见)和props(不可变,子组件可见)的设计,在面对大型项目时候,容易因为不经意修改state造成状态混乱,组件渲染错误 RN使用了Virtual DOM,不需要Target绑定->Action修改UI属性,只要当状态变化,render新状态下的组件,数据单向传递,而MVC的设计模式存在双向数据流. RN不

  • 深入理解redux之compose的具体应用

    应用 最近给自己的react项目添加redux的时候,用到了redux中的compose函数,使用compose来增强store,下面是我在项目中的一个应用: import {createStore,applyMiddleware,compose} from 'redux'; import createSagaMiddleware from 'redux-saga'; const sagaMiddleware = createSagaMiddleware(); const middlewares

  • 一文理解Redux及其工作原理

    一文理解Redux及其工作原理

    目录 一.是什么 二.工作原理 三.如何使用 小结 一.是什么 React是用于构建用户界面的,帮助我们解决渲染DOM的过程 而在整个应用中会存在很多个组件,每个组件的state是由自身进行管理,包括组件定义自身的state.组件之间的通信通过props传递.使用Context实现数据共享 如果让每个组件都存储自身相关的状态,理论上来讲不会影响应用的运行,但在开发及后续维护阶段,我们将花费大量精力去查询状态的变化过程 这种情况下,如果将所有的状态进行集中管理,当需要更新状态的时候,仅需要对这个管

  • react redux入门示例

    环境准备 为了方便,这里使用create-react-app搭建react环境 create-react-app mydemo 弹出配置 如果需要自定义react的配置,需要运行下面的命令把配置文件弹出来. npm run eject 安装redux npm i redux --save 简单理解 redux简单用法就是通过它的store来订阅和发布信息. 通过subscribe来订阅action,通过dispatch来触发action.reducer中定义来各个action要做的事情. dem

  • React+Antd+Redux实现待办事件的方法

    之前也是写过一篇关于Redux的文章,来简单理解一下Redux,以及该如何使用.今天我就来分享一个也是入门级别的,React+Redux+antd来实现简单的待办事件.同时也讲讲自己对Redux的理解.先来看一张图吧: 我们简单的比喻来让我们更加好的理解Redux,我们这样比喻(图书馆借书): 1.React Component:借书人 2.Action Creators:你要说你要借书这句话,肯定要说话吧,就是一句话:我要借书 3.Store:图书馆管理员 4.Reducer:图书馆管理员肯定

  • 在小程序中集成redux/immutable/thunk第三方库的方法

    一.前言 小程序给我们暴露了两个参数 require 和 module , require 用来在模块中加载其他模块, module 用来将模块中的方法暴露出去 module.exports = function(){} 所以只要需要让第三方库的代码使用这种形式的 export 就可以了 二.构建Redux的微信小程序包 打一个 Redux 包,让它可以兼容微信小城的加载方式 git clone https://github.com/reactjs/redux.git npm install #

  • 一篇文章介绍redux、react-redux、redux-saga总结

    一篇文章介绍redux、react-redux、redux-saga总结

    本篇主要将react全家桶的产品非常精炼的提取了核心内容,精华程度堪比精油.各位大人,既然来了,客官您坐,来人,给客官看茶~~ redux 前言 首先,本篇文章要求您对js,react等知识有一定的了解,如果不曾了解,建议您先看一下:React精髓!一篇全概括(急速) React有props和state: props意味着父级分发下来的属性 state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,这就是react的单向数据流 这就意味着如果是一个数据状态非常复杂的应

  • React项目中使用Redux的 react-redux

    目录 背景 UI 组件 容器组件 connect() mapStateToProps() mapDispatchToProps() 组件 实例:计数器 背景 在前面文章一文理解Redux及其工作原理中,我们了解到redux是用于数据状态管理,而react是一个视图层面的库 如果将两者连接在一起,可以使用官方推荐react-redux库,其具有高效且灵活的特性 react-redux将组件分成: 容器组件:存在逻辑处理 UI 组件:只负责现显示和交互,内部不处理逻辑,状态由外部控制 通过redux

  • 详解Redux的工作流程

    详解Redux的工作流程

    目录 Redux理解 redux是什么 什么情况下需要使用redux? redux工作流程图 action reducer store 求和案例——纯react版 求和案例——redux精简版 求和案例——redux完整版 (当然不是这张图) Redux理解 redux是什么 redux是一个专门用于做状态管理的JS库(不是react插件库): 它可以在react.angular.vue等项目中,但基本与react配合使用: 作用:集中式管理react应用中多个组件共享的状态. 什么情况下需要使

  • 微信小程序开发教程之增加mixin扩展

    微信小程序开发教程之增加mixin扩展

    Mixin简介 Mixin(织入)模式并不是GOF的<设计模式>归纳中的一种,但是在各种语言以及框架都会发现该模式(或者思想)的一些应用.简单来说,Mixin是带有全部实现或者部分实现的接口,其主要作用是更好的代码复用. Mixin这个概念在React, Vue中都有支持,它为我们抽象业务逻辑,代码复用提供了方便.然而小程序原生框架并没直接支持Mixin.我们先看一个很实际的需求: 为所有小程序页面增加运行环境class,以方便做一些样式hack.具体说就是小程序在不同的运行环境(开发者工具|

  • Python深度学习albumentations数据增强库

    Python深度学习albumentations数据增强库

    数据增强的必要性 深度学习在最近十年得以风靡得益于计算机算力的提高以及数据资源获取的难度下降.一个好的深度模型往往需要大量具有label的数据,使得模型能够很好的学习这种数据的分布.而给数据打标签往往是一件耗时耗力的工作. 拿cv里的经典任务为例,classification需要人准确识别物品类别或者生物种类,object detection需要人工画出bounding box, 确定其坐标,semantic segmentation甚至需要在像素级别进行标签标注.对于一些专业领域的图像标注,依

随机推荐