动手实现 Redux(六):Redux 总结
不知不觉地,到这里大家不仅仅已经掌握了 Redux,而且还自己动手写了一个 Redux。我们从一个非常原始的代码开始,不停地在发现问题、解决问题、优化代码的过程中进行推演,最后把 Redux 模式自己总结出来了。这就是所谓的 Redux 模式,我们再来回顾一下这几节我们到底干了什么事情。
我们从一个简单的例子的代码中发现了共享的状态如果可以被任意修改的话,那么程序的行为将非常不可预料,所以我们提高了修改数据的门槛:你必须通过 dispatch
执行某些允许的修改操作,而且必须大张旗鼓的在 action
里面声明。
这种模式挺好用的,我们就把它抽象出来一个 createStore
,它可以产生 store
,里面包含 getState
和 dispatch
函数,方便我们使用。
后来发现每次修改数据都需要手动重新渲染非常麻烦,我们希望自动重新渲染视图。所以后来加入了订阅者模式,可以通过 store.subscribe
订阅数据修改事件,每次数据更新的时候自动重新渲染视图。
接下来我们发现了原来的“重新渲染视图”有比较严重的性能问题,我们引入了“共享结构的对象”来帮我们解决问题,这样就可以在每个渲染函数的开头进行简单的判断避免没有被修改过的数据重新渲染。
我们优化了 stateChanger
为 reducer,定义了 reducer 只能是纯函数,功能就是负责初始 state
,和根据 state
和 action
计算具有共享结构的新的 state
。
createStore
现在可以直接拿来用了,套路就是:
// 定一个 reducer
function reducer (state, action) {
/* 初始化 state 和 switch case */
} // 生成 store
const store = createStore(reducer) // 监听数据变化重新渲染页面
store.subscribe(() => renderApp(store.getState())) // 首次渲染页面
renderApp(store.getState()) // 后面可以随意 dispatch 了,页面自动更新
store.dispatch(...)
现在的代码跟 React.js 一点关系都没有,接下来我们要把 React.js 和 Redux 结合起来,用 Redux 模式帮助管理 React.js 的应用状态。
上一节:动手实现 Redux(五):不要问为什么的 reducer
动手实现 Redux(六):Redux 总结的更多相关文章
- React-安装和配置redux调试工具Redux DevTools
chrome扩展程序里搜索Redux DevTools进行安装 新建store的时候,进行如下配置. import { createStore, applyMiddleware ,compose} f ...
- 25.redux回顾,redux中的action函数异步
回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...
- Redux 和 Redux thunk 理解
1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...
- [Redux] Understand Redux Higher Order Reducers
Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a ...
- 手把手教你撸一套Redux(Redux源码解读)
Redux 版本:3.7.2 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 说白了Redux就是一个数据存储工具,所以数据基础模型有get方法,set方法以及数据改变后通知 ...
- 记一次修改框架源码的经历,修改redux使得redux 可以一次处理多个action,并且只发出一次订阅消息
redux是一个数据状态管理的js框架,redux把行为抽象成一个对象,把状态抽象成一个很大的数据结构,每次用户或者其他什么方式需要改变页面都可以理解成对数据状态的改变,根据出发这次改变的不同从而有各 ...
- 动手学servlet(六) 过滤器和监听器
过滤器(Filter) 过滤器是在客户端和请求资源之间,起一个过滤的作用,举个例子,比如我们要请求admin文件夹下的index.jsp这个页面,那么我们可以用一个过滤器,判断登录用户是不是管理员 ...
- BizTalk动手实验(六)Orchestration开发
1 课程简介 通过本课程熟悉Orchestration的相关开发与测试技术 2 准备工作 熟悉XML.XML Schema.XSLT等相关XML开发技术 熟悉.NET相关开发技术 新建BizTalk空 ...
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- Java的动手动脑(六)
日期:2018.11.8 星期四 博客期:022 --------------------------------------------------------------------------- ...
随机推荐
- ul li menu
第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是: <ul><li><a href="1">首页</a>&l ...
- HDFS集群安装部署
准备环境: 三台centos7虚拟机(Node-1,Node-2,Node-3) 配置虚拟机网络,保证三台机器可以互相ping通,并且和宿主机可以互相ping通.如果仅仅是作为虚拟机学习,可以关闭防火 ...
- ABAP range 用法
转自http://www.sapjx.com/abap-range-table.html 1. Range Table 概述 Range Table 为 SAP R/3系统标准内表的一种,结构与 Se ...
- 20170218-取值Domain
1.通过视图DD07V, 例子:取SD 凭证类别的DOMAIN(VBTYP)DATA: LT_DD07V TYPE TABLE OF DD07V.SELECT * INTO T_DD07V FROM ...
- PrintWrite
向文本输出流打印对象的格式化表示形式.此类实现在 PrintStream 中的所有 print 方法.它不包含用于写入原始字节的方法,对于这些字节,程序应该使用未编码的字节流进行写入. 与 Print ...
- uptime详解,最通俗的说明了cpu平均负载
今天又个网友问uptime的三个平均负载值具体要怎么理解,发现要自己解释还真不知道怎么表达~~~~,下面到网上找了篇文章给大家分享: uptime命令,有两大用处,一个是看您的机器的运行时间,另一 ...
- JavaScript实现Map、Reduce和Filter
1. [代码][JavaScript]代码 <script type="text/javascript">// 函数式编程:// 描述我们要做什么,而不是我们如 ...
- html5--6-13 CSS3中的颜色表示方式
html5--6-13 CSS3中的颜色表示方式 学习要点 掌握选择器的优先级问题 掌握CSS3中新增的颜色表示方式 选择器的优先级问题 原则上:元素选择器<类选择器< ID选择器< ...
- html5--6-59 其他常用CSS属性
html5--6-59 其他常用CSS属性 实例 学习要点 了解opacity属性:透明度设定 了解cursor属性:自定义鼠标样式 了解CSS新单位rem和em的区别 了解轮廓outline的设置 ...
- Watir: 应用Watir-Webdriver 访问需要证书的网站情况
#Suppose we will access an SVN net require 'watir-webdriver' b = Watir::Browser.new :chrome b.goto ' ...