1. redux的功能
redux.js是一个独立的js库，它用来给js应用提供统一的状态管理。
所谓的状态管理，我理解就是在模块化开发体系下的，管理全局变量的快捷方式。模块化开发讲究独立，低耦合。如果一个变量定义在父组件中，可以通过属性的方式传递给子组件。如果一份数据希望在多个逻辑上无关的组件中之间共享：即对于多个组件来讲，这份数据升级为了全局变量。这时我们就可以使用redux来完成管理工作。
理解如下：
（1）多个函数都要使用的变量，提出来做全局变量。
（2）在单页应用中，多个组件之间要进行数据通信，可以也通过一个类似于“全局变量”的东东来处理。
（3）不只是在 react中使用。
2. 三个核心概念
要使用redux只需要掌握三个概念即可。
- state:数据
就是要我们统一管理的变量；多个组件要共享的数据； - action:动作。规定动作的名字及这个动作所带的参数。
修改，或者获取数据要通过规定的动作来完成。例如：
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
注意：
- 从语法上看，action是一个简单对象。
- type是操作类型，这个数据项是必须的，而text是当前的操作（插入数据）要附加的参数，它并不是必须的。例如，如果是排列操作，可能就不需要参数了。
- reducer:函数。接收两个参数：旧的state，action，返回新的state
action只是规定了对state施加的所有合法操作的规范，但具体的实现细则由reducer函数来实现。
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([{ text: action.text, completed: false }]);
case 'TOGGLE_TODO':
return state.map((todo, index) =>
action.index === index ?
{ text: todo.text, completed: !todo.completed } :
todo
)
default:
return state;
}
}
如上的的todos就是一个reducer函数。这里为什么要叫reducer？ 对照理解另一个知识点：数组的reduce方法。
[1,2,3,4,5].reduce((a,b)=>a+b,100); // return 100
reduce的第一个参数是一个函数， 这个函数会接收两个参数，进行一番计算后返回一个新值，再把这个新值作为下一轮计算时的第一个参数的值。这个函数的特点就是接收参数，运算，返回新值。这一点与上面的用到的这类函数的性质是一样的，所以称之为reducer函数。
注意：
- 一个action发生了，就意味着state要发生变化。而具体如何变，则由reducer内部的业务代码来实现。
好了，知道了上面的三个核心概念之后，我们再来介绍一下redux这个库给我们提供的一些api
3. redux的api
redux是一个独立的js库。常用的api有如下四个：
- var store = Redux.createStore(reducer,初始state)
创建一个redux管理器。这是使用redux的第一步。它的参数就是一个reducer函数。第二个参数是可选的。 - store.dispatch(action)
创建一个store之后，你在任意时间地点都可以去派发动作。这个动作发生之后，会进入reducer中的代码逻辑去更新state。 - store.subscribe(回调函数)
添加对state的监听。如果state发生了变化，我们那当然需要做出相应的处理。当store调用了dispatch方法时，回调函数就会执行。 - store.getState()
获取当前的state。
4.代码1：最精简的redux的使用
在实操过程中，基本步骤如下:
- 定义初始state.
- 定义reducer。列出所有的对state的操作及具体实现。
- 创建store对象。(Redux.createStore(reducer,state)
- 添加某个监听者 (store.subscrib)
- 在某些个时间去派发action。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/redux/4.0.0/redux.min.js"></script>
</head>
<body>
<script>
const todoList = [{txt:"爬18楼",done:false}] // 1.
const reducer = function(state=[],action){ // 2.
switch (action.type) {
case "ADD":
return [...state,{txt:action.txt,done:false}]
break;
default:
return state
break;
}
}
const store = Redux.createStore(reducer) // 3.
// 4. 以下为添加两个监听者
store.subscribe( ()=>{
console.info("有人改了state")
})
store.subscribe( () => {
console.info(store.getState())
})
// 5. 派发action
store.dispatch({type:"ADD",txt:"test"})
// 检查一下是否添加成功
store.getState()
</script>
</body>
</html>
