随着 JavaScript 单页应用开发日趋复杂,越来越多的 state (状态)需要在前端进行管理。

这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI 状态,如激活的路由,被选中的标签,是否显示加载动效或者分页器等等。

为了高效的管理 state 而不是简单的在全局上新建变量,开发者需要捋清 model/view 之间的关系,以降低前端开发的复杂性。此处以 Redux 为例,总结如何利用其设计思想以及实践经验,来使得应用的 state 管理变得容易。

核心概念

Redux 的核心概念第一点则是 state 的表示,你可以用一个对象来表示应用的 state (可以看成 model) 但不能直接修改他(没有 setter)。这一步定义的内容可以看成是用于控制页面效果、动画的一些开关状态。

{
todo: [],
name: 'me'
}

想要修改 state 中的数据只能通过发起 action 来实现(这样做的好处就是可以清晰的知道应用中到底发生了什么), action 也是一个普通对象,用来描述将要发生什么。在 action 中我们需要存储发生事件的描述以及用于更新 state 的属性数据,比如:

{ type: 'ADD_TODO', text: 'Go to swimming pool' }

那么如何接收 action 并更新返回新的 state 呢?用 reducer 函数。它接收 state 和 action,在内部处理后并返回新的 state。考虑到应用的复杂性,我们可以分别编写 reducer 分别独立地操作 state tree 的不同部分。

Redux 三大原则

  • 单一数据源:整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。
  • State 是只读的:唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
  • 使用纯函数来执行修改:为了描述 action 如何改变 state tree ,你需要编写 reducers。

基础

Action

我们约定,action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下,type 会被定义成字符串常量。除了 type 字段外,对象结构完全由自己决定。但是需要注意的是应该尽量减少在 action 中传递的数据。

为了了解生成 action,还需要知道 action 创建函数,该函数只是简单的返回一个 action,这样做将使 action 创建函数更容易被移植和测试。例如:

function addTodo(text) {
return {
type: ADD_TODO,
text
}
}

当你把 action 创建函数结果传给 dispatch() 方法,即可发起一次 dispatch 过程,例如:

dispatch(addTodo(text))

在使用过程中可能用到的工具包括 connect(), bindActionCreators()

Reducer

reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。通过 reducer,我们不仅可以修改 state 还可以借机初始化 state。

针对 action 的处理我们需要注意:不要修改 state,且在 default 情况下返回旧的 state。

在使用过程中可能用到的工具包括 combineReducers()

Store

在知道了如何用 reducer 来根据 action 更新 state 后,需要进一步了解的就是 store —— 将它们联系到一起的对象。store 具有以下职责:

  • 维持应用的 state;
  • 提供 getState() 方法获取 state;
  • 提供 dispatch(action) 方法更新 state;
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数注销监听器。

数据流

Redux 应用中的数据的生命周期遵循四个步骤:

  • 调用 store.dispatch(action)
  • redux store 调用传入的 reducer 函数
  • 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树
  • Redux store 保存了根 reducer 返回的完整 state 树

搭配 react

结合 react 开发其中比较重要的一点在于如何设计组件层次结构。结合 react 可以知道在组件层次方面,主要需要考虑两点:展示组件和容器组件,当然不好区分的组件可以划分为其他组件。

(转)redux的更多相关文章

  1. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  2. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  3. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  4. redux学习

    redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...

  5. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  6. Redux初见

    说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...

  7. react+redux教程(八)连接数据库的redux程序

    前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...

  8. react+redux教程(七)自定义redux中间件

    今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...

  9. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  10. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

随机推荐

  1. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

  2. javaee utf-8文件的转换

    package Zy; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.Fil ...

  3. shell脚本操作mysql数据库,使用mysql的-e参数可以执行各种sql的(创建,删除,增,删,改、查)等各种操作

    mysql  -hhostname -Pport -uusername -ppassword  -e  相关mysql的sql语句,不用在mysql的提示符下运行mysql,即可以在shell中操作m ...

  4. mysql主从机制的部署与应用

    部署mysql主从复制 Mysql master ip: 192.168.30.25   一主两从 Mysql slave ip: 192.168.30.24 Mysql slave ip:192.1 ...

  5. jsp 多条件组合查询

    web层: public String query(HttpServletRequest request, HttpServletResponse response) throws ServletEx ...

  6. Spring Cloud Alibaba、Spring Boot、Spring Cloud对应版本关系

    Spring Boot Spring Cloud Spring Cloud Alibaba 2.1.x Greenwich 0.9.x 2.0.x Finchley 0.2.x 1.5.x Edgwa ...

  7. eas中删除原来的监听事件添加新的监听事件

    kdtEntrys.removeKDTEditListener(kdtEntrys.getListeners(KDTEditListener.class)[0]);  kdtEntrys.addKDT ...

  8. [51Nod1446] 限制价值树 (容斥+MT定理+折半搜索)

    传送门 Description 有N个点(N<=40)标记为0,1,2,...N-1,每个点i有个价值val[i],如果val[i]=-1那么这个点被定义为bad,否则如果val[i] > ...

  9. python中字节与字符串的转换

    #bytes object    byte = b"byte example"     # str object    str = "str example" ...

  10. 08.Web服务器-3.Web静态服务器

    1.显示固定的页面 from socket import * from multiprocessing import * import os def handleClient(clientSocket ...