起初接触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>