最近公司有个项目使用react+redux来做前端部分的实现,正好有机会学习一下redux,也和小伙伴们分享一下学习的经验。

首先声明一下,这篇文章讲的是Redux的基本概念和实现,不包括react-redux。

源码地址:https://github.com/lyc-chengzi/reactProject

首先说一下我理解的Redux:

它只是一个管理数据的一个工具,帮助我们创建app中唯一的一个数据结构的树,并且按照约定的方法来管理这颗树,让我们的数据的更改变为可预测的。

任何一个普通的框架,或者如angular, jquery等都可以依赖于这个数据结构,来做自己的事情。

react-redux:

这个库则是帮助我们将react组件和redux创建的数据树串联起来,让普通的react组件根据state来重新渲染。

以后可能也会有angular-redux, jquery-redux等等库,帮助我们实现其他框架的ui渲染。

好了,下面进入正题:

Redux的运行原理

1. 先定义好我们的reducer -> 2. 组装reducer -> 3. 调用redux.createStore创建一个store -> 4. store调用dispatch方法 ->5. 触发你写的reducer -> 6. 返回新的state

举一个简单的例子,我们的app就是一个计数器,实现加和减的功能,一个最简单的数据结构:{counter: 0};下面开始按照上面的步骤实现

1. 先定义一个我们的reducer,其实就是一个回调函数

 function counter(state = 0, action){
switch (action.type){
case 'counter_add':
return ++state;
break; default:
return state;
}
}

reducer固定会接收两个参数,state和action。

reducer的作用就是接受一个旧的state,然后内部加工处理后,返回一个新的state给redux,这就是reducer的职能:扩展或修改原有state并返回!

第一个参数state就是redux告诉我们的更改前的数据,我们以此为基础做一些操作。具体是那些操作,就通过第二个参数action告诉我们。

如上面的代码,通过action.type,我们处理了counter_add action,即数字加1操作,我们把state+1;其他未知操作我们直接返回原有state。

这样一个最简单的reducer就创建完了,是不是很简单? 就是一个普通的回调函数

2. 组装reducer

 var app = function(state = {}, action){
return {counter: counter(state.counter, action)};
};

这一步的目的是返回一个根reducer,因为默认state为undefined,所以我们给state一个默认值{}。根reducer返回一个json对象,key为名称,value为具体的实现reducer

3. 创建store

let store = redux.createStore(app);
console.log(store.getState());

简单的2行代码,通过我们定义的根reducer,redux创建一个store对象返回给我们。

我们只能通过dispatch方法来改变整个app的state,调用getState方法查看初始化后的数据结构

4. 调用dispatch,来实现计数器增加

 store.dispatch({type: 'counter_add'});
console.log(store.getState());

dispatch方法只接受一个action参数。

action为一个json对象:必须包含type属性,用来标识是哪一个action,也可以有其他属性作为附加值传递到reducer

这里我们传递了'counter_add'告诉redux。

这个action会从你的根reducer一直传递下去,到末级reducer。只要我们定义的reducer处理这个action,就会更新state。

然后我们打印最新的state,如下

如果我们要更新state,只能通过调用store.dispatch方法,传递action参数。然后redux会调用我们的reducer来处理这个action,最后return 最新的state。

下面我们通过源码来看一下关键的两个函数是如何运行的。

1. createStore

 function createStore(reducer, preloadedState, enhancer) {
var currentReducer = reducer;
var currentState = preloadedState;
var currentListeners = [];
var nextListeners = currentListeners;
var isDispatching = false; dispatch({ type: ActionTypes.INIT }); return _ref2 = {
dispatch: dispatch,
subscribe: subscribe,
getState: getState,
replaceReducer: replaceReducer
}, _ref2[_symbolObservable2['default']] = observable, _ref2;
}

上面是createStore的关键代码。

使用了闭包的技巧,隐藏了几个关键变量:

currentReducer=>我们传入的根reducer

currentState => 当前默认state,我们默认为一个空json对象{}

nextListeners和currentListeners用来保存监听函数,当我们调用dispatch方法时会触发

isDispatching => 当前调度状态,只有当前调度状态是false时才会执行dispatch方法

初始化完几个关键内部变量后,执行了一次默认的dispatch方法,action.type为reduxInit

最后返回了一个包装对象,包含了对外公开的方法。我们只能通过这几个方法来操作内部的变量。

(虽然可以var state= store.getState();获取state之后直接修改,但千万不要这么做,不然redux也没有意义了。个人认为如果getState()返回一个clone的currentState会更好)

2.我们来看一下dispatch都干了些什么

 function dispatch(action) {
if (!(0, _isPlainObject2['default'])(action)) {
throw new Error('Actions must be plain objects. ' + 'Use custom middleware for async actions.');
} if (typeof action.type === 'undefined') {
throw new Error('Actions may not have an undefined "type" property. ' + 'Have you misspelled a constant?');
} if (isDispatching) {
throw new Error('Reducers may not dispatch actions.');
} try {
isDispatching = true;
currentState = currentReducer(currentState, action);
} finally {
isDispatching = false;
} var listeners = currentListeners = nextListeners;
for (var i = 0; i < listeners.length; i++) {
listeners[i]();
} return action;
}

非常简单,只是调用了你根reducer函数,然后将内部保存的当前state,和action传了过去,剩下的都是你的reducer干的事情了。

所以createStore默认调用了一次dispatch,action.type为init,我们的reducer没有对应的处理方法,直接将默认的state返回了回去。

现在也就明白了为什么我们的reducer为什么要在default的时候返回变化前的state。

所以总结一下redux,就是dispatch的过程,(因为createStore也是dispatch,不过是在内部调用的),每一次dispatch都会调用一次我们的根reducer,然后重新构建一遍数据,

然后把新的数据保存起来。

到此我们就把一个最简单的redux例子学完了。下一篇将会介绍另一种组装reducer的方法:通过调用

redux.combineReducers

方法让redux帮我们构建数据结构,并且演示如何做多级的数据结构

通过Redux源码学习基础概念一:简单例子入门的更多相关文章

  1. Redux源码学习笔记

    https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...

  2. redux源码学习笔记 - createStore

    本篇是学习redux源码的一些记录,学习的redux版本是^4.0.1. 在页面开发时,需要管理很多状态(state),比如服务器响应,缓存数据,UI状态等等···当页面的庞大时,状态就会变的混乱.r ...

  3. redux源码学习笔记 - applyMiddleware

    在创建store时,createStore(reducer, preloadedState, enhancer),除了reducer函数,初始状态,还可以传入enhancer.这个enhancer在c ...

  4. redux源码学习笔记 - combineReducers

    上一篇有了解到,reducer函数的两个为:当前state和此次dispatch的action. state的结构是JavaScript对象,每个key都可以代表着不同意义的数据.比如说 { list ...

  5. Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期

    学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看 ...

  6. 走进Spring Boot源码学习之路和浅谈入门

    Spring Boot浅聊入门 **本人博客网站 **IT小神 www.itxiaoshen.com Spring Boot官网地址:https://spring.io/projects/spring ...

  7. Redux源码分析之基本概念

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  8. 框架源码系列十:Spring AOP(AOP的核心概念回顾、Spring中AOP的用法、Spring AOP 源码学习)

    一.AOP的核心概念回顾 https://docs.spring.io/spring/docs/5.1.3.RELEASE/spring-framework-reference/core.html#a ...

  9. 【 js 基础 】【 源码学习 】柯里化和箭头函数

    最近在看 redux 的源码,代码结构很简单,主要就是6个文件,其中 index.js 负责将剩余5个文件中定义的方法 export 出来,其他5个文件各自负责一个方法的实现. 大部分代码比较简单,很 ...

随机推荐

  1. iOS并发编程笔记【转】

    线程 使用Instruments的CPU strategy view查看代码如何在多核CPU中执行.创建线程可以使用POSIX 线程API,或者NSThread(封装POSIX 线程API).下面是并 ...

  2. Backbone源码分析(三)

    Backbone源码分析(一) Backbone源码分析(二) Backbone中主要的业务逻辑位于Model和Collection,上一篇介绍了Backbone中的Model,这篇文章中将主要探讨C ...

  3. JS、JQuery和ExtJs的跨域处理

    1.什么是跨域?跨域,JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a. ...

  4. ReactNative与NativeScript对比报告

    综合这段时间对ReactNative(下称RN)和NativeScript(下称NS)的简单学习了解,分别从不同方面分析对比二者的优缺点. 页面结构 NS一个页面的目录结构: RN的一个页面一般就是一 ...

  5. Android学习第三天-签名常用命令

    由于怕篇幅过长,所以把这个打包常用命令分开成两篇博文来进行讲解,下面我们直接进入主题吧. 8.keytool 这是我们JDK自带的密钥和证书管理工具 命令: -certreq 生成证书请求 -chan ...

  6. Git 进阶指南

    转自: https://github.com/kaiye/kaiye.github.com/issues/7 在掌握了基础的 Git 使用 之后,可能会遇到一些问题.以下是猫哥筛选总结的部分常见问题, ...

  7. ArcGIS之Cartogram地图变形记

    一.地图会说谎 地图作为真实世界的抽象,是“用图说话”最可靠的工具,但是有的时候地图也会撒一些小小的谎言,其中最著名的例子当属美国总统大选.如图1是2012年美国总统大选后网上给出的一个结果图,红色代 ...

  8. CI框架搭建

    CI 框架等移植到不同等环境十分方便,只要改很少等配置: 1.修改config.php 文件(修改这一个文件就可以跑通了): $config['base_url'] = 'http://127.0.0 ...

  9. jquery做一些小的特效

    在文本框里输入内容到添加到下拉列表里,移除下拉里的内容 1 <!DOCTYPE html> <html> <head> <meta charset=" ...

  10. python中configparser模块

    python中的configparse模块的使用 主要用来解析一些常用的配置,比如数据配置等. 例如:有一个dbconfig.ini的文件 [section_db1] db = test_db1 ho ...