redux笔记_reduxcsdn博客-CSDN博客

起初接触redux的时候，看了很多文档，一直迷糊，直到看了阮一峰的一个例子，感觉清楚了不少，

这个例子简单易上手，也不用搭建什么环境，很容易理解

*这是我自己的个人理解（我习惯把理解做比喻，这样会让我印象深刻）

//像一个装着钱的ATM机

//提前已写好了规则比如：100对应的是1张，200对应的2张。。。。相当于reducer

//ATM机里面有程序有钱相当于store

//当你通过界面输入100元时就会去store里面的reducer去找type==100的，

//找到了，那么好，钱出来，你的钱包里就多了一百元，找不到，那就取不出来相当于action

下边是代码实例（加了部分自己的理解）

demo演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://unpkg.com/redux@latest/dist/redux.min.js'></script>
</head>
<body>
<p>
Clicked:<span id='value'>0</span></span> times
<button id='increment'>+</button>
<button id='decrement'>-</button>
<button id='incrementIfOdd'>Increment if odd</button>
<button id='incrementAsync'>Increment async</button>
</p>
<script>
//reducer
//定义规则（个人理解）
// 我的需求：点击加号数字加一，点击减号数字减一
// 这个加一减一就是reducer 也就是说你想要state怎么样
//这个数字的变化就是state store就像一个容器，把state放进去
//这个触发state变化的就是点击时action告知的

function counter(state,action){
if(typeof state ==='undefined'){
return 0
}
switch(action.type){
case 'INCREMENT':
return state+1;
case 'DECREMENT':
return state-1;
default:
return state;
}
}
//store
//存储state数据把reducer返回的数据都放在store里
var store=Redux.createStore(counter)
var valueEl=document.getElementById('value');
function render(){
//store.getState获取当前的state;
valueEl.innerHTML=store.getState().toString()
}
render();//调用
//store 的subscrbe方法监听state的变化，一旦变化就会执行render函数
store.subscribe(render);

//action
document.getElementById('increment').addEventListener('click',function(){
store.dispatch({type:'INCREMENT'})
})
document.getElementById('decrement').addEventListener('click',function(){
store.dispatch({type:'DECREMENT'})
})
document.getElementById('incrementIfOdd').addEventListener('click',function(){
if(store.getState() % 2 !=0){
store.dispatch({type:'INCREMENT'})
}
})
document.getElementById('incrementAsync').addEventListener('click',function(){
store.dispatch({type:'INCREMENT'})
})

</script>
</body>
</html>