Redux中的重要概念

Action/Reducer/Store

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

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

Action和Action Creator

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

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

{
    type: ‘ADD_TASK‘,
    name: ‘Read ES6 spec‘,
    category: ‘Reading‘
}

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

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

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

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

function addTask(name, category) {
    return {
        type: ADD_TASK,
        name,
        category
    };
}

Reducer

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

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

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

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

(previousState, action) => newState

Reducer函数的形式通常如下:

function reducer(state = [], action) {
    // 处理不同action的代码
    switch (action.type) {
        case SPECIAL_ACTION:
            // 根据SPECIAL_ACTION action更新state
            // 返回新的state
        default:
            return state
    }
}

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组件。

export default class Provider extends Component {
  getChildContext() {
    return { store: this.store }
  }

  constructor(props, context) {
    super(props, context)
    this.store = props.store
  }

  render() {
    const { children } = this.props
    return Children.only(children)
  }
}

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

connect

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

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

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

return function wrapWithConnect(WrappedComponent) {
  class Connect extends Component {
    constructor(props, context) {
      // 从祖先Component处获得store
      this.store = props.store || context.store
      this.stateProps = computeStateProps(this.store, props)
      this.dispatchProps = computeDispatchProps(this.store, props)
      this.state = { storeState: null }
      // 对stateProps、dispatchProps、parentProps进行合并
      this.updateState()
    }
    shouldComponentUpdate(nextProps, nextState) {
      // 进行判断,当数据发生改变时,Component重新渲染
      if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
        this.updateState(nextProps)
          return true
        }
      }
      componentDidMount() {
        // 改变Component的state
        this.store.subscribe(() = {
          this.setState({
            storeState: this.store.getState()
          })
        })
      }
      render() {
        // 生成包裹组件Connect
        return (
          <WrappedComponent {...this.nextState} />
        )
      }
  }
  Connect.contextTypes = {
    store: storeShape
  }
  return Connect;
}        

详细内容和demo

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

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

总结

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

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

时间: 2024-10-06 17:21:02

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

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

上周利用业余的时间看了看Redux,刚开始有点不适应,一下在有了Action.Reducer.Store和Middleware这么多新的概念. 经过一些了解之后,发现Redux的单向数据里的模式还是比较容易理解的,结合着Redux的单向数据流模型,很多概念就比较清晰了. 下面就按照自己的理解整理出了Redux中相关的内容,如果你也刚开始学习Redux,希望能给你一个直观的认识. Action/Reducer/Store 首先,先看看第一张图,图中展示了Redux的单向数据流,以及Action.R

应用数据流状态管理框架Redux简介、核心概念及工作流

前几天给大家谈了谈React 不过它只是一个侧重于UI的框架 只能算作是MVC中的V(View视图) 而且只是DOM的一个抽象层,不是Web应用完整解决方案 如果仅仅用它构建大型项目 你会非常的吃力 简介 14年,Facebook提出Flux架构意图解决这个问题 15年,Dan Abramov将 Flux 与函数式编程相结合,创造了Redux,由于简单易学就开始流行起来 16年,Dan Abramov被facebook挖走了 Redux体积很小,如果删掉源码的空行和注释,连500行代码都不到 别

数据库中一些基本概念的深入理解

1.怎样理解事务的一致性 一致性就是一个这样的东西,一致性对于不同的应用领域有着不同的定义,因为它就是按照业务规则来说明这个是一致的,那个是不一致的,这个角度上讲,一致性就是一个系统的状态,一个合理的状态.而合理则表现在这个状态是否符合业务规则.例如:转账业务中合理的状态就是,转出和转入帐户必须出入相等,如果不等那就意味着不合理,也就是不一致,有时候我们很容易就能把它定为"守恒一致性",也就是说总体来说什么也不多,什么也不少就是一致性.而这个规则能够使用于其他的义务吗?我们不能说不能,

Python中类型的概念(一)

本课程主要介绍6种Python语言中的类型:数字类型.字符串类型.元组类型.列表类型文件类型.字典类型 1.数字类型 Python语言包括三种数字类型:整数类型.浮点数类型.复数类型 (1)整数类型 与数学中的整数概念一致,没有取值范围限制 pow(x, y)函数:计算xy. (通过指数函数,可以看出,python语言整数类型没有范围限制) (0x, 0X开头表示16进制数) (0b, 0B开头表示2进制数 ) (0o, 0O开头表示8进制数) (2)浮点数类型 带有小数点及小数的数字 Pyth

javascript (js)中的基本概念

1. 基本数据类型 1.1 number (数字)在js中没有整形和浮点型的区分,所有的数字都是浮点型标识, 采用64位的浮点格式来表示数字.如果数字类型用在字符串连接表达式中,则会自动转换成字符串, 在JS中表示16进制通过在数字前加"0x"或"0X"(零). 1.2 string (字符串)字符串类型是实用单引号('')或双引号("")括起来的unicode字符序列, 一些特殊的字符可以通过转义符来标识.如果字符串用在数字表达式环境中,字符串

关于一些 MYSQL中的字符集概念

最近遇到mysql乱码的问题,找了些资料,先保存,后面慢慢总结自己的处理方法. 笔记: 问题环境总结: 1.前台php代码没有改变 2.原数据库,所有表的都是utf8 mysql> show variables like '%char%';+--------------------------+----------------------------------+| Variable_name            | Value                            |+---

[Elasticsearch] 聚合中的重要概念 - Buckets(桶)及Metrics(指标)

[Elasticsearch] 聚合中的重要概念 - Buckets(桶)及Metrics(指标) 2015-01-04 来源: http://blog.csdn.net/dm_vincent/article/details/42387161 本章翻译自Elasticsearch官方指南的Aggregations-High-level Concepts一章. 高层概念(High-Level Concepts) 和查询DSL一样,聚合(Aggregations)也拥有一种可组合(Composabl

java中的引用类型概念

转自:http://blog.sina.com.cn/s/[email protected]陌上蜗牛 1.什么是引用类型     引用类型(reference type)指向一个对象,不是原始值,指向对象的变量是引用变量. 在java里面除去基本数据类型的其它类型都是引用数据类型,自己定义的class类都是引用类型,可以像基本类型一样使用.     示例如下:     public class MyDate {         private int day = 8;         priva

Redux 中的CombineReducer的函数详解

combineReducers(reducers) 随着应用变得复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分. combineReducers 辅助函数的作用是,把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore. 合并后的 reducer 可以调用各个子 reducer,并把它们的结果合并成一个 state 对象.sta