2019独角兽企业重金招聘Python工程师标准>>>

相信很多人接触 Redux 时都会被它奇怪的 API 搞得云里雾里。这里不再冗述 Flux 架构的思想,实现 Flux 的工具有很多,它们只是在实现这种编程模式,并不会有太复杂的逻辑。事实也是这样,Redux 的 API 非常少,但并不一定容易理解。

createStore

createStore 没什么好说的,创建 Store,但其参数值得一提——一个称为 reducer 的函数。reducer 函数接受两个参数,stateaction,依据 action 对 state 进行复制更新并返回:

const store = createStore((state = {counter: 0}, action) => {switch(action.type) {case 'add':return Object.assign({}, state, {counter: state.counter + 1});case 'minus':return Object.assign({}, state, {counter: state.counter - 1});default:return state;}
});

combineReducers

辅助函数,分解 reducer 之用。如:

// 分解前
const reducer = (state = {counter: 0, status: 'idle'}, action) => {};
createStore(reducer);
// 分解后
const counter = (state = 0, action) => {};
const status = (state = 'idle', action) => {};
createStore(combineReducers({counter, status}));

可见 combineReducers 只不过把 state 的各个属性分解开来进行处理,再把处理后的数据合并起来。

applyMiddleware

一种 store enhancer,使用 compose 来强化 createStore 的能力。这一个理解起来非常绕的函数。它允许对 createStore 进行多层包装,并修改了返回的 store 对象,可以在 dispatch 操作前后执行其它逻辑,有点类似 AOP 的感觉。事实上只要包装 dispatch 方法就能实现这些功能,也印证了 Redux文档 的这句:

Middleware only wraps the store’s dispatch function. Technically, anything a middleware can do, you can do manually by wrapping every dispatch call, but it’s easier to manage this in a single place and define action transformations on the scale of the whole project.

bindActionCreators

辅助函数:

function addTodoActionCreator(text){return {type: "add",text: text};
}// 调用 bindActionCreators(addTodoActionCreator, dispatch) 后function addTodoAction(text){dispatch({type: "add",text: text});
}
// 这样可以直接调用addTodoAction来派发 Action。

我们也可以实现自己的 bindActionCreators

function bindActionCreators (actionCreators, dispatch) {if('function' === typeof actionCreators) {return function () {dispatch(actionCreators.apply(arguments));};} else {let ret = {};for (let e in actionCreators) {if('function' === typeof actionCreators[e]) {ret[e] = bindActionCreators(actionCreators[e], dispatch);}}return ret;}
}

compose

辅助函数,用以解构深度嵌套函数,体现了柯里化的编程模式,如:

 function $1 (func) {return function () {return func.apply(null, arguments)+ '1';};
}function $2 (func) {return function () {return func.apply(null, arguments) + '2';};
}function $3 (num) {return num;
}$1($2($3))(3);// 321(compose($1, $2, $3))(3)// 321

你也可以实现自己的 compose

function compose () {const args = Array.prototype.slice.call(arguments).reverse();let tmp = args[0];if (!tmp) {return function (a) {return a;}}for( let i = 1; i < args.length; ++i){tmp = (args[i])(tmp);}return tmp;
}

除了 Store 对象的方法外,这五个 Redux 的核心函数中有三个为辅助函数,执行各种“魔法”操作,如果没有这些预定义的函数,可能会增加冗余代码量,但绝不会影响你实现 Flux。

除了不十分常用并且仍可自实现的 applyMiddleware 之外,只有 createStore 为刚需函数,因此可见调用 Redux 并不复杂。这可能要联系到 Flux 架构这种单向的数据流转方式,对于解耦业务逻辑十分简单并且凑效。

转载于:https://my.oschina.net/yinyongcom666/blog/648423

Redux 的黑魔法相关推荐

  1. redux ngrx_另一个减少Redux(NGRX)应用程序样板的指南

    redux ngrx by Andrey Goncharov 通过安德烈·贡恰洛夫(Andrey Goncharov) 另一个减少Redux(NGRX)应用程序样板的指南 (Yet another g ...

  2. Redux 入坑笔记

    Redux 简要的说就是一个事件分发器和全局state控制台. Redux 有一个全局的state,通过将根组件包进Provider,将store分发给所有的子组件,而子组件通过connect方法,获 ...

  3. operate函数_跟着 redux 学 compose组合函数

    ▲ 点击上方蓝字关注我 ▲ 把你的心 我的心串一串 串一株幸运草 串一个同心圆 文 / 景朝霞 来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing 目录0 / 热热身1 / red ...

  4. Redux 入门教程(三):React-Redux 的用法

    前两篇教程介绍了 Redux 的基本用法和异步操作,今天是最后一部分,介绍如何在 React 项目中使用 Redux. 为了方便使用,Redux 的作者封装了一个 React 专用的库 React-R ...

  5. Redux 入门教程(二):中间件与异步操作

    上一篇文章,我介绍了 Redux 的基本做法:用户发出 Action,Reducer 函数算出新的 State,View 重新渲染. 但是,一个关键问题没有解决:异步操作怎么办?Action 发出以后 ...

  6. Redux 入门教程(一):基本用法

    一年半前,我写了<React 入门实例教程>,介绍了 React 的基本用法. React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案.有两个方面,它没涉及. 代码结构 ...

  7. Koa2和Redux中间件源码研究

    一.Koa2中间件源码分析 在Koa2中,中间件被存放在一个数组中. 使用koa中,最常见的就是app.use(fn),use函数部分源码如下所示.首先中间件必须是个函数.若是generator函数, ...

  8. React+Redux+中间件

    MVVM是Model-View-ViewModel的缩写.mvvm是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View 代表UI 组件,它负责将数据模 ...

  9. redux rxjs_可观察的RxJS和Redux入门指南

    redux rxjs Redux-Observable is an RxJS-based middleware for Redux that allows developers to work wit ...

最新文章

  1. Python中正则匹配与中文的问题
  2. 计算机网络系统--Microsoft Lync 与 腾讯通RTX 对比(转载)
  3. 基于mysql 5.5+mysql-master-ha实现mysql ha架构
  4. MapReduce基础开发context.write注意new text()多出一列的问题
  5. 求点被多少个矩形覆盖
  6. 01_Weblogic课程之概念篇:代理服务器,web服务器,应用程序服务器,JNDI概念,JTA概念,Java消息服务,Java验证和授权(JAAS),Java管理扩展,Web客户机,客户机应用程序
  7. 特征工程(part2)--数值型数据
  8. 递归调用层数太多_VBA学习笔记46:组合之递归算法(没写后补)
  9. 认清当下的努力,可能毫无意义
  10. jstack+top 定位占用资源的进程
  11. 通过代码触发dropdownlist_SelectedIndexChanged事件。
  12. 【leetcode】心得
  13. 使用cmd命令删除服务
  14. 树莓派3B+ 远程下载服务器(Aria2)
  15. Axure RP9教程 内部框架
  16. 《征服老板:零基础做出高逼格PPT》笔记(二)
  17. 学python哪个app比较好_初学python编程,有哪些不错的软件值得一用?
  18. 输入正确的账号密码和验证码后 验证码一直报错误的解决办法
  19. css仿cs1.6模型,最新CS1.6模仿样式武器模型
  20. 世界上最遥远的距离就是周一到周六

热门文章

  1. Hibernate 注解学习
  2. 点击量终于突破十万大关,以示庆贺,耶!!!
  3. POJ 1062 昂贵的聘礼
  4. nginx反向代理部署与演示(二)
  5. 在 Linux 下忘记 mysql root 密码的解决方法
  6. 【C语言】12-指向一维数组元素的指针
  7. jsp自定义标签学习
  8. rails3 ajax替换成js
  9. 上周新闻回顾:Vista麻烦不断 Office波澜再起(2.26-3.4)
  10. Even Parity UVA - 11464 (枚举)