1、redux作为react技术栈系列中解决数据管理的一种架构，我们非常有必要学会它，理解它。
2、为什么要用redux？很多人很疑惑。有这么一句话，我觉得很经典，就是当你不知道要不要用redux的时候，那就不需要使用redux。只有当你遇到你解决不了的问题的时候，redux可能就是你的解决方案。
3、如果一个人开始学习redux，他最好记住这么一套逻辑，redux的核心是一个数据容器，用store描述，一个相同的store数据容器必定对应一个相同的界面view，一个单页面的应用从用户的角度出发，只能通过用户的行为（使用action描述）来改变数据，而处理用户的这种行为的函数我们叫reducer。
总的来说，就是用户发出action，我们reducer处理用户行为，然后store数据改变，引发界面发生相应的改变。（上面的一段描述非常重要，这是理解redux的关键，不管怎么样，必须有一个整体的印象，没有印象就再读一遍。）
4、redux几乎没有任何强制性的规定，没有教你该怎么写，怎么做，它只提供了少量的API，但是没有强制性规定的东西，才是我们理解的痛点！！redux的一些基本概念如下：
5、store
store是我们创建的数据容器，它是一个对象，里面存放的是我们的数据。它的基本API使用方式如下：
import { createStore } from "redux";
const store = createStore(todoApp);
//store就是我们创建的数据容器，是一个对象，如果console.log就会发现，它还有一些方法，如比较常用的dispatch()方法，getState()方法等等。
//todoApp是我们的reducer函数，用于处理用户action行为。后面会详细说明。
- 1
- 2
- 3
- 4
6、action
action是一种描述用户行为的一个对象！！
如何描述用户行为？redux把每个用户的不同操作都描述成为一个带有type属性的对象，类似于：
{
type:"TODO" }
- 1
- 2
- 3
其中，type是这个对象必须有的一个属性，描述的是用户“todo”类型的行为。
一般而言，我们把用户的行为类型定义成常量。像下面这样：
const TODO = "TODO";
let action = {
type:TODO,
}
- 1
- 2
- 3
- 4
7、action creater
一般而言，用户的同种类型的行为很可能携带某些信息，就比如我们购买我们喜欢的衣服，可能一件不够，我多买几件，这样就重复的点击淘宝上的“+”按钮，同一种行为，但是每次有个+1的操作，这时候就是action creater的存在意义了。
action creater是一个函数，可接受参数，返回的是一个action对象。使用方式如下：
const TODO = "TODO";
function todo(text){
return {
type:TODO,
text:text
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
8、reducer
reducer是处理用户行为的函数。它的逻辑就是根据用户的行为，把store里面的数据跟新为新的状态。
old state—>reducer处理（通过action行为）—->new state；
所以这个reducer函数的参数就可想而知了。一个是旧的状态，一个是用户action行为，返回值是新的state。
类似下面这样：
function todos(state=0,action){
switch (action.type){
case "ADD":
return state+1;
case "DEC":
return state-1;
default:
return state;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
这个处理函数是这样的，旧的状态是state，用户行为是action，state我们给的初始值是0，也就是我们在什么都不做的情况下，我们存储到store中的数据的值，action是我们用户的行为，它有一个必须的属性type，如果这个type是”ADD”的时候，我们把state更新为state +1，如果是”DEC”的时候，我们把state更新为state-1。默认情况下返回原值state。
这里的todos就是我们之前创建的数据容器，所接受的那个函数，我之前写的是todoApp。
9、在这里，个人觉得有必要再描述一个整体上的运行过程。
我们规定了一种行为叫action，这种行为通过它的属性type进行区分，用户通过这种行为，redux就会自动识别并且处理这种行为，就是上面的reducer函数，从而数据进行更新。
10、到这里，我们还有问题没有解决！用户如何发出这种行为action？数据刷新之后界面如何进行更新？我们如何读取store中的数据？
这就要牵扯到store的一些方法了。
store.getState(),获取store中存储的数据！
store.dispatch(action),发出用户行为。action是个对象，不多说。
store.subscribe(handleEvent),对store中的数据进行监听，如果更新了数据，就会自动触发handleEvent函数，handleEvent是一个回调函数。
11、实践是检验真理的唯一标准，我们看一个示例：
首先要明白一点，redux是一种数据管理的架构，它不针对react，仅仅是很适合react，我们在任何地方都可以使用redux。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<button id="add">add</button>
<p id="value"></p>
<button id="dec">de</button>
</body>
<script>
function reducer(state,action) {
if(state === 'undefined'){
state = 0;
}
console.log(state);
switch (action.type){
case 'ADD':
return state + 1;
case 'DEC':
return state - 1;
default:
return 0;
}
}
var store = Redux.createStore(reducer);//创建store
console.log(store.getState());
var op = document.getElementById('value') ;
renders();//先执行op.innerHTML = store.getState()
//点击行为，描述用户action
document.getElementById('add').onclick = function () {
store.dispatch({type:"ADD"});
}
document.getElementById('dec').onclick = function () {
store.dispatch({type:"DEC"});
}
//subscribe的回调函数
function renders() {
op.innerHTML = store.getState()
}
store.subscribe(renders);//监听
</script>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
这是在js中应用redux的实例，其要点有这么几点
第一、使用redux，必须引入redux库。
第二、创建了reducer函数，有两种行为，”ADD”和”DEC”。
第三、创建了store数据容器。
第四、store.getState()获取数据存入数据。
第五、store.dispatch()发出用户行为action。
第六、store.subscribe()监听数据变动。