首先我们要知道Redux是什么
Redux是JavaScript的状态容器,它提供了可预测的状态管理。Redux可以运行在不同的环境下,不论是客户端、服务器端,还是原生应用都可以运行Redux。注意,Redux和React之间没有什么特别的关系,不要因为它们都是Re开头你就以为它们是有什么关联关系。不管你使用什么框架,Redux都可以作为一个状态管理器应用到这些框架上。
Redux的动机
当前端开发的应用变得越来越复杂的时候,随着各种框架的推出,单页面应用也层出不穷,这些应用的状态(state)也变得复杂起来。状态其实就是这个应用运行的时候需要的各种各样的动态数据,它们可能来自服务器端返回的数据、本地生成还没有持久化到服务器的数据、本地缓存数据、服务器数据加载状态、当前路由等。
管理这些不断的变化令人非常苦恼,改变一个model的时候可能会引起其他无法预料的副作用,比如说其他model的变化或者view的变化。state在何时、什么原因发生了改变都变得无法预测。
Redux正是视图解决这个问题、让state的变化可以预测的工具。它是如何做到的呢?先来看一下它提出的三大定律。
三大定律
- 单一数据源
整个应用的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'
}
}
}
- state是只读的
不能在state上面直接修改数据,改变state的唯一方法是触发action。action只是一个信息载体,一个普通的JavaScript对象。
这样确保了其他操作都无法修改state数据,整个修改都被集中处理,而且严格按顺序执行。
//使用dispatch触发store改变
store.dispatch({
type: 'CREATE_POST',
post: {id: 2, content: 'hello there'}
});
//使用getState方法返回当前state
store.getState();
- 使用纯函数执行修改
为了描述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;
}
}