Redux框架浅析

撸了今年阿里、头条和美团的面试，我有一个重要发现.......>>>

Redux是javascript的状态容器，它提供了可预测的状态管理。注意Redux和React并没有特别的联系，你不管使用什么框架，Redux都可以作为一个状态管理器应用到这些框架上。

Redux的三大定律：

1. 单一数据源
2. state是只读的
3. 使用纯函数执行修改

解释一下这三大定律，首先是单一数据源，整个应用的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可以做什么操作呢：

1. 保存整个程序的state
2. 通过getState()方法访问state的值
3. 通过dispatch()方法执行一个action
4. 通过subscribe(listener)注册回调，监听state的变化

数据流

刚才用删除文章举例说明了Redux，那么整个数据流可以分为一下几步：

1. 调用store.dispatch(action)来执行删除文章的操作
2. store对象中存在所有的reducer函数（因为store = createStore(reducer);），那么当前的state和action会根据action中的type（唯一标示）执行对应的reducer
3. reducer执行完之后会返回一个新的state
4. store保存reducer返回的state，然后可以通过store.getState()获取。