不知不觉地,到这里大家不仅仅已经掌握了 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 的应用状态。

下一节:动手实现 React-redux(一):初始化工程

上一节:动手实现 Redux(五):不要问为什么的 reducer

动手实现 Redux(六):Redux 总结的更多相关文章

  1. React-安装和配置redux调试工具Redux DevTools

    chrome扩展程序里搜索Redux DevTools进行安装 新建store的时候,进行如下配置. import { createStore, applyMiddleware ,compose} f ...

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

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

  3. Redux 和 Redux thunk 理解

    1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...

  4. [Redux] Understand Redux Higher Order Reducers

    Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a ...

  5. 手把手教你撸一套Redux(Redux源码解读)

    Redux 版本:3.7.2 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 说白了Redux就是一个数据存储工具,所以数据基础模型有get方法,set方法以及数据改变后通知 ...

  6. 记一次修改框架源码的经历,修改redux使得redux 可以一次处理多个action,并且只发出一次订阅消息

    redux是一个数据状态管理的js框架,redux把行为抽象成一个对象,把状态抽象成一个很大的数据结构,每次用户或者其他什么方式需要改变页面都可以理解成对数据状态的改变,根据出发这次改变的不同从而有各 ...

  7. 动手学servlet(六) 过滤器和监听器

     过滤器(Filter) 过滤器是在客户端和请求资源之间,起一个过滤的作用,举个例子,比如我们要请求admin文件夹下的index.jsp这个页面,那么我们可以用一个过滤器,判断登录用户是不是管理员 ...

  8. BizTalk动手实验(六)Orchestration开发

    1 课程简介 通过本课程熟悉Orchestration的相关开发与测试技术 2 准备工作 熟悉XML.XML Schema.XSLT等相关XML开发技术 熟悉.NET相关开发技术 新建BizTalk空 ...

  9. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  10. Java的动手动脑(六)

    日期:2018.11.8 星期四 博客期:022 --------------------------------------------------------------------------- ...

随机推荐

  1. HTML CSS 编码规范

    返璞归真,代码规范也是一门艺术 黄金定律 永远遵循同一套编码规范 -- 可以是这里列出的,也可以是你自己总结的.如果你发现本规范中有任何错误,敬请指正.通过open an issue on GitHu ...

  2. JAVA反射改动常量,以及其局限

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/barryhappy/article/details/24442953 问题,以及一个解决方式 今天公 ...

  3. SWT.Shell

    import org.eclipse.swt.widgets.Display; import org.eclipse.swt.widgets.Shell; public class SWT_Shell ...

  4. iOS 视图在不同View之间的切换(对于convertRect:函数的一些理解)

    可以通过以下函数完成坐标体系在不同View之间的切换,如下面是完成当前View向ParentView坐标的转换(一个矩阵转换)CGRect parentRect = [currentView conv ...

  5. HDU 5687 Problem C

    Problem C Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  6. silverlight DataGrid 内嵌ComboBox 实现加载和保存

    <Grid x:Name="LayoutRoot" Background="White" Height="322" Width=&qu ...

  7. iOS 堆和栈的区别和联系

    堆和栈的区别主要有以下五点: 1.管理方式:对于栈来讲,是由编译器自动管理,无需我们手工控制:对于堆来讲,释放工作由程序员控制,容易产生memory leak(内存泄露). 2.申请大小: 栈是向低地 ...

  8. python(一):multiprocessing——死锁

    前言近年来,使用python的人越来越多,这得益于其清晰的语法.低廉的入门代价等因素.尽管python受到的关注日益增多,但python并非完美,例如被人诟病最多的GIL(值得注意的是,GIL并非py ...

  9. bzoj2878 [Noi2012]迷失游乐园——概率期望DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2878 这个博客写得很好:https://www.cnblogs.com/qt666/p/72 ...

  10. HBase源码分析:HTable put过程

    HBase版本:0.94.15-cdh4.7.0 在 HBase中,大部分的操作都是在RegionServer完成的,Client端想要插入.删除.查询数据都需要先找到相应的 RegionServer ...