首先我们要知道Redux是什么

Redux是JavaScript的状态容器,它提供了可预测的状态管理。Redux可以运行在不同的环境下,不论是客户端、服务器端,还是原生应用都可以运行Redux。注意,Redux和React之间没有什么特别的关系,不要因为它们都是Re开头你就以为它们是有什么关联关系。不管你使用什么框架,Redux都可以作为一个状态管理器应用到这些框架上。

Redux的动机

当前端开发的应用变得越来越复杂的时候,随着各种框架的推出,单页面应用也层出不穷,这些应用的状态(state)也变得复杂起来。状态其实就是这个应用运行的时候需要的各种各样的动态数据,它们可能来自服务器端返回的数据、本地生成还没有持久化到服务器的数据、本地缓存数据、服务器数据加载状态、当前路由等。
管理这些不断的变化令人非常苦恼,改变一个model的时候可能会引起其他无法预料的副作用,比如说其他model的变化或者view的变化。state在何时、什么原因发生了改变都变得无法预测。
Redux正是视图解决这个问题、让state的变化可以预测的工具。它是如何做到的呢?先来看一下它提出的三大定律。

三大定律

  1. 单一数据源
    整个应用的state存储在一个JavaScript对象中,Redux用一个称为store的对象来存储整个state。比如,在Deskmark添加上用户的概念的话,我们可以设计一个这样的结构来存储所以数据:
{
	posts: {
		isLoading: false,
		items: {
			{id: 1, content: 'hello world'}
		}
	},
	user: {
		isLoading: false,
		userInfo: {
			name: 'viking',
			email: 'viking@me.com'
		}
	}
}
  1. state是只读的
    不能在state上面直接修改数据,改变state的唯一方法是触发action。action只是一个信息载体,一个普通的JavaScript对象。
    这样确保了其他操作都无法修改state数据,整个修改都被集中处理,而且严格按顺序执行。
//使用dispatch触发store改变
store.dispatch({
	type: 'CREATE_POST',
	post: {id: 2, content: 'hello there'}
});
//使用getState方法返回当前state
store.getState();
  1. 使用纯函数执行修改
    为了描述action怎样改变state,需要编写reducer来规定修改的规则。
    reducer是纯函数,接收先前的state和处理的action,返回新的state。reducer可以根据应用的大小拆分成多个,分别操控state的不同部分。
    纯函数的好处是它无副作用,有什么样的输入就有什么样的输出。比如说数组的reduce方法就是一个reducer。
//这就是一个reducer,负责处理action,返回新的state
function posts(state = [], action) {
	switch (action.type) {
		case 'CREATE_POST':
			return [...state, action.post];
		default:
			return state;
	}
}
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐