Redux框架浅析
2017-04-11 00:00
225 查看
Redux是javascript的状态容器,它提供了可预测的状态管理。注意Redux和React并没有特别的联系,你不管使用什么框架,Redux都可以作为一个状态管理器应用到这些框架上。
Redux的三大定律:
单一数据源
state是只读的
使用纯函数执行修改
解释一下这三大定律,首先是单一数据源,整个应用的state都储存在一个javascript对象中,Redux用一个store对象来储存整个state,我们可以把这个store对象理解成一个全局变量,整个应用中只有一个store对象。
第二state是只读的,那个要想改变state,就只能通过store对象,store对象有一个方法叫做dispatch,dispatch有个参数叫做action,我们可以把这个action理解为一个装载信息载体的普通的javascript对象,最后要改变state,只需调用store.dispatch(acation)即可。
第三使用纯函数执行修改,那么我们有了一个action,执行了store.dispatch(action),比如action是一个删除文章的信息载体,那么我们执行了store.dispatch(acation)之后,state是怎么变化呢,就需要一个纯函数来执行对state的修改。在Redux中,我们称这个纯函数为reducer,既然reducer是一个函数,那么就会有参数和返回值,这里reducer的参数为先前的state和要处理的action,返回值为一个新的state。
Redux的组成
在说Redux的三大定律的时候已经涉及到Redux的组成,Redux有三部分组成,分别是action、reducer和store,下面再一一解释:
action:
刚才说到action其实就是一个装载信息载体的javascript对象,比如说可能为一个删除文章的信息载体,那么这么一个action需要装载什么信息呢?首先需要一个唯一的标示,来告诉大家这个action就是用来删除文章的,然后还需要一个文章ID,来说明要删除哪一篇文章。然后用代码的形式展现出来就是:
这就是一个标准的action。
reducer:
我们刚才说reducer是一个纯函数,它的作用就是生成一个新的state,这个函数有两个参数,一个是以前的state,另一个是要执行的action,最后通过函数中的一些表达式逻辑判断,生成一个新的state,这里需要注意的是生成一个新的state,而不是在原来的state上改造。
例如:
store:
在说Redux的三大定律的时候,store已经多次提到,那么store就是action和reducer的黏合剂,在action和reducer中我们发现并没有Redux的代码,那么怎么生成一个store呢?如下:
生成一个store需要用到Redux库中的createStore函数,函数有一个参数,就是reducer,那么我们拿到store可以做什么操作呢:
保存整个程序的state
通过getState()方法访问state的值
通过dispatch()方法执行一个action
通过subscribe(listener)注册回调,监听state的变化
数据流
刚才用删除文章举例说明了Redux,那么整个数据流可以分为一下几步:
调用store.dispatch(action)来执行删除文章的操作
store对象中存在所有的reducer函数(因为store = createStore(reducer);),那么当前的state和action会根据action中的type(唯一标示)执行对应的reducer
reducer执行完之后会返回一个新的state
store保存reducer返回的state,然后可以通过store.getState()获取。
Redux的三大定律:
单一数据源
state是只读的
使用纯函数执行修改
解释一下这三大定律,首先是单一数据源,整个应用的state都储存在一个javascript对象中,Redux用一个store对象来储存整个state,我们可以把这个store对象理解成一个全局变量,整个应用中只有一个store对象。
第二state是只读的,那个要想改变state,就只能通过store对象,store对象有一个方法叫做dispatch,dispatch有个参数叫做action,我们可以把这个action理解为一个装载信息载体的普通的javascript对象,最后要改变state,只需调用store.dispatch(acation)即可。
第三使用纯函数执行修改,那么我们有了一个action,执行了store.dispatch(action),比如action是一个删除文章的信息载体,那么我们执行了store.dispatch(acation)之后,state是怎么变化呢,就需要一个纯函数来执行对state的修改。在Redux中,我们称这个纯函数为reducer,既然reducer是一个函数,那么就会有参数和返回值,这里reducer的参数为先前的state和要处理的action,返回值为一个新的state。
Redux的组成
在说Redux的三大定律的时候已经涉及到Redux的组成,Redux有三部分组成,分别是action、reducer和store,下面再一一解释:
action:
刚才说到action其实就是一个装载信息载体的javascript对象,比如说可能为一个删除文章的信息载体,那么这么一个action需要装载什么信息呢?首先需要一个唯一的标示,来告诉大家这个action就是用来删除文章的,然后还需要一个文章ID,来说明要删除哪一篇文章。然后用代码的形式展现出来就是:
const DELETE_ARTICLE = 'DELETE_ARTICLE'; function deleteArticle(id){ return { type:DELETE_ARTICLE, id:id } }
这就是一个标准的action。
reducer:
我们刚才说reducer是一个纯函数,它的作用就是生成一个新的state,这个函数有两个参数,一个是以前的state,另一个是要执行的action,最后通过函数中的一些表达式逻辑判断,生成一个新的state,这里需要注意的是生成一个新的state,而不是在原来的state上改造。
例如:
let initState = [ {'id':1,'title':'文章一'}, {'id':2,'title':'文章二'}, {'id':3,'title':'文章三'} ] function deleteArticleReducer(state = initState,action){ switch(action.type){ case 'DELETE_ARTICLE': return state.filter((article) => { return article.id != action.id; }); default: return initState; } }
store:
在说Redux的三大定律的时候,store已经多次提到,那么store就是action和reducer的黏合剂,在action和reducer中我们发现并没有Redux的代码,那么怎么生成一个store呢?如下:
import {createStore} from 'redux'; import reducer from './reducer'; let store = createStore(reducer)
生成一个store需要用到Redux库中的createStore函数,函数有一个参数,就是reducer,那么我们拿到store可以做什么操作呢:
保存整个程序的state
通过getState()方法访问state的值
通过dispatch()方法执行一个action
通过subscribe(listener)注册回调,监听state的变化
数据流
刚才用删除文章举例说明了Redux,那么整个数据流可以分为一下几步:
调用store.dispatch(action)来执行删除文章的操作
store对象中存在所有的reducer函数(因为store = createStore(reducer);),那么当前的state和action会根据action中的type(唯一标示)执行对应的reducer
reducer执行完之后会返回一个新的state
store保存reducer返回的state,然后可以通过store.getState()获取。
相关文章推荐
- 目前为止最好的Redux教程!
- 00
- Redux系列01:从一个简单例子了解action、store、reducer
- Redux系列x:源码分析
- Redux系列02:一个炒鸡简单的react+redux例子
- 基于 React.js + Redux + Bootstrap 的 Ruby China 示例
- thinkjs结合react后端渲染
- React 相关文档
- redux 学习脑图分享
- Redux 的黑魔法
- redux学习记录
- redux+react-router报错
- Redux入门者对Redux的理解和使用
- 通过Redux的异步操作来深入了解Redux的中间件
- 实例讲解react+react-router+redux
- 史上最全的 Redux 源码分析
- Redux异步操作
- React-Redux (初探)
- React-Redux 恢复列表页跳转明细页之后返回列表状态