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