环境说明
redux版本:4.0.0
redux官网:redux.js.org/
redux仓库:github.com/reduxjs/red…
redux视频:egghead.io/courses/get…
redux示例:redux.js.org/introductio…
redux要点回顾
Redux是什么?
Redux 是JavaScript 应用的状态管理容器,提供集中式、可预测的状态管理。
Redux出现的动机?
- Web应用越来越复杂,需要管理的应用状态越来越多;
- 应用的状态在什么时候,由于什么原因,如何变化已然不受控制;
- 我们总是将两个难以理清的概念混淆在一起:变化和异步;
Redux核心概念?
- Store:保存应用程序State数据的地方;
- Action:JS普通对象,用于描述一个事件以及必要参数,是改变 State 的唯一办法;
- Reducer:纯函数,用于根据Action完成 State 状态的修改;
- Middleware:Action到达Reducer前需经过的“管道”,用于Action预处理(例:异步管理、日志记录);
Redux与React的关系?
Redux是一个独立的状态管理容器,本身与React没什么关系;如果想用Redux作为React应用的状态管理器,需要借助react-redux组件建立Redux与React间的联系
redux源码分析
文件整体结构分析
- utils/isPlainObject.js:工具函数,判断是否是简单对象(通过 {} 或 new Object构造的对象)
- utils/warning.js:工具函数,用于向控制台打印警告信息;
- utils/actionTypes.js:供Redux内部使用的2个Action常量定义;
- applyMiddleware.js:Redux官方附带一个的Store增强器,用于扩展、增强Store的dispatch函数功能(例:日志记录[redux-logger]、异步管理[redux-thunk、redux-promise、redux-saga]等...);
- compoese.js:函数式编程的经典案例,用于从左到右组合函数;applyMiddleware内部使用compose串联多个middleware组件;如果我们需要用到多个Store增强器,也需要借助compose进行合并、串联;
- combineReducers.js:稍微复杂点的应用就不可能只写一个Reducer,它能帮助我们将一堆小Reducer合并为一个大Reducer;
- bindActionCreators.js:函数式编程的又一范例,用于组合dispatch和actionCreators,看后面的例子就知道了..
- createStore.js:Redux的核心了...
- index.js:Redux项目入口,定义了Redux的外部接口;
index.js
- createStore
- combineReducers
- bindActionCreators
- applyMiddleware
- compose
注:在index.js中统一导出分散在各目录中的子模块,这样使用者无论需要用到什么模块,只需从统一的位置import,无需记忆各子模块的实际位置;值得借鉴
utils/isPlainObject.js
判定一个JS对象是不是PlainObject;
utils/warning.js
向控制台输出警告信息的工具类;
进入重头戏之前先来看一个Redux小例子回顾一下Redux核心工作流
bindActionCreators.js
store.dispatch( actionCreator(...) )是我们向Redux发送Action的一般方式,但这要求我们未来在发送Action时,既要引用到store对象又要引用actionCreator,耦合度高;bindActionCreators就是把store.dispatch与actionCreator绑定在一起的工具;
示例:
createStore.js
顾名思义,创建Store用的,Redux核心模块;
utils/actionTypes.js:
定义了2个Redux内部使用的Action常量,用于在Redux初始化或替换Reducer时完成Store初值构建;
combineReducers.js
对于Redux应用来说,只有一个Store、也只有一个Reducer;但随着应用变得越来越复杂,我们需要对 reducer 函数进行拆分,拆分后的每一块独立负责管理 state 的一部分;
示例:
compose.js:
compose实际上是一个函数式编程中的写法,表示从右向左组合多个函数。compose被appliMiddleware.js内部用于组合多个middleware组件;
applyMiddleware.js:
applyMiddleware是Redux官方附带的一个Store增强器;
回顾一下createStore的接口:
最后再贴一张middleware中next与dispatch间的关系图:
参考资料:
《深入React技术栈》
github.com/reduxjs/red…
github.com/reduxjs/red…
github.com/evgenyrodio…
社区以及公众号发布的文章,100%保证是我们的原创文章,如果有错误,欢迎大家指正。
文章首发在WebJ2EE公众号上,欢迎大家关注一波,让我们大家一起学前端~~~
再来一波号外,我们成立WebJ2EE公众号前端吹水群,大家不管是看文章还是在工作中前端方面有任何问题,我们都可以在群内互相探讨,希望能够用我们的经验帮更多的小伙伴解决工作和学习上的困惑,欢迎加入。