Action/Reducer/Store

首先,先看看第一张图,图中展示了Redux的单向数据流,以及Action、Reducer和Store这三个核心概念。

下面就围绕上图,非别介绍Action、Reducer和Store这三个概念。

Action和Action Creator

Action是一个对象,用来代表所有会引起状态(state)变化的行为(例如服务端的响应,页面上的用户操作)。

假如我们要实现一个任务管理系统,那么添加任务的Action对象就会是下面的形式:

  1. {
  2. type: 'ADD_TASK',
  3. name: 'Read ES6 spec',
  4. category: 'Reading'
  5. }

Action对象是行为的描述,一般都会包含下面的信息:

  • 一个字符串类型的type字段来表示将要执行的动作
  • 需要传递给应用的其他数据信息(例子中的name和category),数据形式用户可以自定义

Action通过Action创建函数(Action Creator)来创建,Action Creator是一个函数,最终返回一个Action对象。

对于添加任务这个行为,对应的Action Creator如下:

  1. function addTask(name, category) {
  2. return {
  3. type: ADD_TASK,
  4. name,
  5. category
  6. };
  7. }

Reducer

Action对象仅仅是描述了行为的相关信息,至于如何通过特定的行为来更新state,就需要看看Reducer了。

关于Reducer,最简单的描述就是:

  • Reducer是一个函数
  • 该函数接收两个参数,一个旧的状态previousState和一个Action对象
  • 返回一个新的状态newState

根据上面的描述,Reducer函数就可以表示为:

  1. (previousState, action) => newState

Reducer函数的形式通常如下:

  1. function reducer(state = [], action) {
  2. // 处理不同action的代码
  3. switch (action.type) {
  4. case SPECIAL_ACTION:
  5. // 根据SPECIAL_ACTION action更新state
  6. // 返回新的state
  7. default:
  8. return state
  9. }
  10. }

Store

Actions描述了"what happened"的事实,Reducers则根据这些actions来更新state,而Store则是Actions和Reducers连接在一起的对象。

Store是Redux中数据的统一存储,维护着state的所有内容,所以Store的主要功能就是:

  • 维护应用的state内容
  • 提供getState()方法获取 state
  • 提供dispatch(action)方法更新 state
  • 提供subscribe(listener)方法注册监听器

看到Store提供的方法,就可以把Action、Reducer和Store联系在一起了:

  1. Store通过dispatch(action)方法来接收不同的Action
  2. 根据Action对象的type和数据信息,Store对象可以通过Reducer函数来更新state的内容

Middleware

下面就来看看第二张图,跟第一张图的差别不大,只是增加了中间件(Middleware)来处理Action。

在Redux中,Middlerwares主要的作用就是处理Action,Redux中的Action必须是一个plain object。但是为了实现异步的Action或其他功能,这个Action可能就是一个函数,或者是一个promise对象。这是就需要中间件帮助来处理这种特殊的Action了。

也就是说,Redux中的Middleware会对特定类型action做一定的转换,所以最后传给reducer的action一定是标准的plain object。

针对Action的特征,Reudx Middleware可以采取不同的操作:

  • 可以选择传递给下一个中间件,如:next(action)
  • 可以选择跳过某些中间件,如:dispatch(action)
  • 或者更直接了当的结束传递,如:return。

Redux中常用的中间件:

  • redux-thunk:action可以是一个函数,用来发起异步请求。
  • redux-promise:action可以是一个promise对象,用来更优雅的进行异步操作。
  • redux-logger:action就是一个标准的plain object,用来记录action和nextState的。

react-redux

经过前面的介绍,我们已经看到了Redux中的一些核心概念。Redux跟React没有直接的关系,本身可以支持React、Angular、Ember等等框架。

通过react-redux这个库,可以方便的将react和redux结合起来:react负责页面展现,redux负责维护/更新数据状态。

到这里,第三张图就展示了react-redux这个库的工作原理,react和redux是怎么联系到一起的。

react-redux中提供了两个重要功能模块Provider和connect,这两个模块保证了react和redux之间的通信,下面就分别看看这两个模块。

Provider

通过Provider的代码可以看到,Provide本质上是一个react组件。

  1. export default class Provider extends Component {
  2. getChildContext() {
  3. return { store: this.store }
  4. }
  5.  
  6. constructor(props, context) {
  7. super(props, context)
  8. this.store = props.store
  9. }
  10.  
  11. render() {
  12. const { children } = this.props
  13. return Children.only(children)
  14. }
  15. }

Provider组件主要用到了react通过context属性,可以将属性(props)直接给子孙component,无须通过props层层传递,从而减少组件的依赖关系。

connect

connect方法的主要作用就是让Component与Store进行关联, Store的数据变化可以及时通知Views重新渲染。

任何一个通过connect()函数处理过的组件都可以得到一个dispatch方法作为组件的props,以及得到全局state中的所有内容。

通过源码]可以看到,connect函数运行后,会返回一个wrapWithConnect函数,该函数可以接收一个react组件,然后返回一个经过处理的Connect组件。

  1. return function wrapWithConnect(WrappedComponent) {
  2. class Connect extends Component {
  3. constructor(props, context) {
  4. // 从祖先Component处获得store
  5. this.store = props.store || context.store
  6. this.stateProps = computeStateProps(this.store, props)
  7. this.dispatchProps = computeDispatchProps(this.store, props)
  8. this.state = { storeState: null }
  9. // 对stateProps、dispatchProps、parentProps进行合并
  10. this.updateState()
  11. }
  12. shouldComponentUpdate(nextProps, nextState) {
  13. // 进行判断,当数据发生改变时,Component重新渲染
  14. if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
  15. this.updateState(nextProps)
  16. return true
  17. }
  18. }
  19. componentDidMount() {
  20. // 改变Component的state
  21. this.store.subscribe(() = {
  22. this.setState({
  23. storeState: this.store.getState()
  24. })
  25. })
  26. }
  27. render() {
  28. // 生成包裹组件Connect
  29. return (
  30. <WrappedComponent {...this.nextState} />
  31. )
  32. }
  33. }
  34. Connect.contextTypes = {
  35. store: storeShape
  36. }
  37. return Connect;
  38. }

详细内容和demo

文中很多Redux的概念都是进行了简单的介绍,更多详细的介绍可以参考,GitHub地址:WilberTian/StepByStep-Redux

每篇文章的结尾都会有一些简单的demo 代码,帮助理解文章中介绍的内容。

总结

文中结合三张图片介绍了Redux中的一些核心概念,以及React和Redux之间通过react-redux这个库进行交互。

更多详细的内容,已经整理到了GitHub上了(WilberTian/StepByStep-Redux),通过这些介绍以及demo的运行结果,一定能对Redux有一个比较基本的认识。

Redux中的重要概念的更多相关文章

  1. 通过三张图了解Redux中的重要概念

    上周利用业余的时间看了看Redux,刚开始有点不适应,一下在有了Action.Reducer.Store和Middleware这么多新的概念. 经过一些了解之后,发现Redux的单向数据里的模式还是比 ...

  2. 25.redux回顾,redux中的action函数异步

    回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...

  3. 清晰理解redux中的

    首先需要明白 Redux 的单一状态树的概念,所谓的单一状态树,就是指“所有的 state 都以一个对象树的形式储存在一个单一的 store 中.” 比如我们有这么一个状态树(或者你叫它状态对象也行) ...

  4. redux 中的 redux-thunk(中间件)

    前言 空闲时间把redux中的redux-thunk中间件回顾下,因为以前没有写博客的习惯,都怪自己太年轻,好了 其实:      redux的核心概念其实很简单:将需要修改的state都存入到sto ...

  5. WebLogic 中的基本概念

    完全引用自: WebLogic 中的基本概念 WebLogic 中的基本概念 上周参加了单位组织的WebLogic培训,为了便于自己记忆,培训后,整理梳理了一些WebLogic的资料,会陆续的发出来, ...

  6. Web开发中的主要概念

    一.Web开发中的主要概念1.静态资源:一成不变的.html.js.css2.动态资源:JavaWeb.输出或产生静态资源.(用户用浏览器看到的页面永远都是静态资源) 3.JavaEE:十三种技术的集 ...

  7. 理解SQL Server中索引的概念

    T-SQL查询进阶--理解SQL Server中索引的概念,原理以及其他   简介 在SQL Server中,索引是一种增强式的存在,这意味着,即使没有索引,SQL Server仍然可以实现应有的功能 ...

  8. PowerShell_零基础自学课程_5_自定义PowerShell环境及Powershell中的基本概念

    PowerShell_零基础自学课程_5_自定义PowerShell环境及Powershell中的基本概念 据我个人所知,windows下的cmd shell除了能够通过修改系统参数来对其中的环境变量 ...

  9. OC中协议的概念以及用法

    OC中协议的概念以及用法,协议也是OC中的一个重点,Foundation框架以及我们后面在写代码都会用到. OC中的协议就是相当于Java中的接口(抽象类),只不过OC中的名字更形象点,因为我们在学习 ...

随机推荐

  1. vs2013中国集

    在TOOLS的菜单条下的最后一项.进去后在输入框输入Language.按Enter.选择语言,然后确定就可以. 如图 假设没有点击下拉框底下的链接 就会调挑转到语言包下载界面 下载须要的语言就可以, ...

  2. Android--------解决ScrollView中嵌套ExpandableListView显示不全的问题

    ##***Scrollview和ExpandableListView嵌套显示不全*** - 当我们将ExpandableListView嵌套在Scrollview之中时,我们必须要确保我们的不居中Ex ...

  3. PHP学习笔记三十七【http】

    <?php print_r($_SERVER); //$_SERVER预编译变量[数组]输出请求报文,注意大小写 echo "<br/>"; foreach($_ ...

  4. iOS archive(归档)的总结

    http://www.cnblogs.com/ios8/p/ios-archive.html

  5. jsp生成html

    这几天公司需要生成静态的HTML页面以减小数据库与服务器的压力和负担,于是在网络上一阵狂搜,找到几篇相当不错的文章和一些相当有用的资料.为了方便,我整理在自己的BLOG,以供参考! 在接下来的应用中, ...

  6. codeforces 519E A and B and Lecture Rooms(LCA,倍增)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud E. A and B and Lecture Rooms A and B are ...

  7. HttpServletResponse HttpServletRequest RequestDispatcher

    HttpServletResponse HttpServletRequest RequestDispatcher 07. 五 / J2EE / 没有评论   一.以字节为单位向客户端发送中文数据1.服 ...

  8. 使用Promise规定来处理ajax请求的结果

    ajax()返回结果是成功的,调用done()中的回调函数: 失败则调用fail()中的回调函数; always()的回调函数不管成功是否都会调用: 可以是使用then()函数代替done()和fai ...

  9. Oracle:ORA-01791: 不是 SELECTed 表达式

     项目中写hql语句 出现 ORA-01791: 不是 SELECTed 表达式问题. 语句如下: select distinct(name) where student order by numbe ...

  10. PHP怎么实现网站中,同一个用户不能同时在线?

    先上图,看个大概: 一般的原则就是,后一个用户登录时会把前一个用户踢下线. 在用户首次登录时,我们会把用户的sessionid保存到数据库,这个是用户的唯一标识.方便后边操作. 用户只有在登录时才会和 ...