2017.9.10日 教师节

1. redux的基本原理

redux就是对一个仓库(store)的操作,我们可以布置好多仓位(state)(如: 水果、零食、糕点)等,他们每一个仓位(state)存储着不同的物品,每一个仓位都有一个操作系统(reducer), 这个操作系统可以进行入库物品(ADD)、统计件数(COUNT)、筛选好(FILTER_GOOD)/坏(FILTER_BAD)等操作,这些操作都用一个统一的标签(type)来表示。好了比喻就到这里。

redux规定:

1. 用户每一次操作store都要触发一个action,这个action仅仅是告诉redux:1. 我要操作的类型type,2. 我提供的数据。触发条件dispatch({type: ... , data: ...});

function addTodo(content) {
return {
type: ADD_TODO,
content: content
}
} dispatch(addTodo('你好啊'))

如上代码,我们触发了一个行为ADD_TODO

2. 触发一个行为后,真正的state操作在reducer里完成,reducer里要做的事: 1. 任何情况都要返回一个state,2. 根据不同的type做不同的操作

function todoApp(state=[], action) {
switch(action.type) {
case ADD_TODO:
return [
...state,
{
content: action.content,
completed: false
}
],
case REMOVE_TODO:
return [
...state.filter(item => item.id != action.id)
]
default:
return state
}
}

差不多就像上面这样,定义了一个reducer函数,这个函数为两个行为做state处理,ADD_TODO、REMOVE_TODO。 该reducer函数接收两个参数,一个state是当前reducer对应的state,action是dispatch传递过来的行为对象。这个函数一定会返回一个新的state。差不多这个意思,不知道代码写错了没。

2. redux源码解析(看着源码看本节)

两个核心方法: combineReducers、createStore

4.1 Reducers 合并函数 combineReducers

用途: 将多个reducer合并成一个。

源码:

1. 该函数接收一个参数reducers,reducers代表着要合并的所有reducer的键值对。

2. redux获取reducers所有键并遍历,过滤出键对应的值是function的项目,生成了最终的reducers对象finalReducers,以防非法reducer值入侵。

3. redux遍历finalReducers对象并检查,是否每一个函数每一次执行总会返回一个state,并做标记shapeAssertionError。

4. 检查完毕后,回一个闭包函数。该闭包函数就是总的reducer函数combination。

在未来的某个时间,这个combination函数会被执行:

1. 如果shapeAssertionError是真,意味着有错误,不执行逻辑。

2. 遍历finalReducers,拿到每个key值和reducers函数, 根据key值从state中拿到当前reducer下的当前状态previousStateForKey, 执行reducer函数并把previousStateForKey和action传入, 执行结果必定返回一个nextStateForKey,记住这个state。

3. 经过一次遍历后,每一个reducer函数都执行并返回了新的state。如果新的state和原来的state一致,返回原来的state,如果不一致,返回新的state。

4.2Store 创建函数createStore

用途: 创建store和工具方法

1. 该函数接收三个参数(只说前两个): reducer(总的reducer函数,combineReducers函数生成的combination函数), preloadedState(自定义的初始化state)

2. 将reducer函数保存在currentReducer变量,初始化一个currentState为preloadedState或者undefined,后续redux会根据currentState值用reducer函数来初始化state。

3.初始化currentListeners、nextListeners为空数组,这两个数组为观察者模式服务,存储监听函数。

4.定义一个subscribe函数用来订阅一个监听函数,同时返回一个闭包函数unsubscribe,当执行这个unsubscribe函数时,当前监听函数移除监听队列。

5.定义dispatch函数,最核心的函数,其工作非常简单,执行当前的reducer函数currentReducer,并把当前currentState和action传递过去。通过currentReducer函数我们可以获取到用户需要下一步得到的state,存储在currentState中为视图层所用。如果有监听函数,就遍历并执行他们。

6.getState函数返回当前state状态树。

3. 注意事项

1. 每一次dispatch都会遍历所有的reducer, 每一个reducer可以对同一行为做不同处理。dispatch要做什么事,只看type值!

2.每一个reducer函数必须有对state为undefined时的处理,因为redux创建store时会初始化一次store,此时store中还没有任何值。

3. reducer函数是个纯函数,只做数据的改变,不做请求、定时器之类的逻辑。

4. 一个store就是一个state的树状结构,你只能通过reducer来改变他的数据。

读redux有感: redux原来是这样操作的。的更多相关文章

  1. 新生 & 语不惊人死不休 —— 《无限恐怖》读后有感

    开篇声明,我博客中“小心情”这一系列,全都是日记啊随笔啊什么乱七八糟的.如果一不小心点进来了,不妨直接关掉.我自己曾经写过一段时间的日记,常常翻看,毫无疑问我的文笔是很差的,而且心情也是瞬息万变的.因 ...

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

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

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

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

  4. 读CopyOnWriteArrayList有感

    除了加锁外,其实还有一种方式可以防止并发修改异常,这就是将读写分离技术(不是数据库上的). 先回顾一下一个常识: 1.JAVA中“=”操作只是将引用和某个对象关联,假如同时有一个线程将引用指向另外一个 ...

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

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

  6. Redux 和 Redux thunk 理解

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

  7. [Redux] Understand Redux Higher Order Reducers

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

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

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

  9. <<编程之美>>1.2读后有感

    问题提出 中国象棋的"将","帅"问题,他俩不能在一条直线上.求出他们的合法位置,并且只能用一个变量. 分析 一头雾水,不明所以.往下看了下,感觉像是程序员为难 ...

随机推荐

  1. Java之IO流概述和File基本操作

    IO流图解 IO(in / out)流的分类 流向: 输入流  读取数据 输出流  写出数据 数据类型: 字节流 一个字节占8位, 以一个字节为单位读数据 八大数据类型所占字节数: byte(1), ...

  2. 用Eclipse生成JPA元模型

    在JPA criteria 动态查询中,有个"元模型"的东西,它是根据"实体"类动态生成的一个类,它的主要作用是实现JPA criteria查询的"类 ...

  3. ES6 变量、常量声明总结

    较之前ES5,新颁布在声明上有改变 一.var  对比  let 1.作用域不同 let只在命令所在的代码块 {} 里有效 ES5只有全局作用域和函数作用域,没有块级作用域,带来很多不合理的场景,比如 ...

  4. Zabbix监控nginx性能

    编辑nginx的配置文件nging #配置ngx_status location /nginx_status{ stub_status on; access_log off; } #重启nginx # ...

  5. POJ 2479 Maximum sum 解题报告

    Maximum sum Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 40596   Accepted: 12663 Des ...

  6. sqlte3 的基本使用4

    sqlite 的order by 语句是用来对数据进行升序降序排序的,asc 是升序,des 是降序 sqlite> select * from student; id name age --- ...

  7. ajax轮询实时获取数据

    最近做一个评论功能时,想要实现实时异步刷新评论功能,于是使用了ajax轮询,这里简单记录一下ajax轮询的原理及使用方法. ajax轮询的原理就是客户端定时向服务端发送ajax请求,服务器接到请求后马 ...

  8. CSSc常用样式

          一.CSS常用文本属性 1.css中的颜色表示方式   1.1直接使用颜色的单词表示:red.green.blue     1.2使用颜色的十六进制表示:#ff0000,#00ff00: ...

  9. iOS绘图框架CoreGraphics分析

    由于CoreGraphics框架有太多的API,对于初次接触或者对该框架不是十分了解的人,在绘图时,对API的选择会感到有些迷茫,甚至会觉得iOS的图形绘制有些繁琐.因此,本文主要介绍一下iOS的绘图 ...

  10. 你有没有忽略TextField的leftView这个属性

    你如果想实现类似有的App注册登陆界面的特殊的TextField的左边有个小图片的效果,可以试试下边的几行代码 UIImageView *imageViewUser = [[UIImageView a ...