标签：
新手看网上一些redux文章，很容易被那些概念搞糊涂，本人照着官方例子打算写个系列新手教程，大家可以参考下，转载请注明出处
教程1即没有用到react,也没有用到npm这些东西，非常适合大家从本质上理解redux。
1.加载redux.js <script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
2.html
<div id="container">
<button onClick="select(‘a‘)">click a</button>
<button onClick="select(‘b‘)">click b</button>
<button onClick="select(‘c‘)"> click c</button>
<div id="show"> </div>
</div>
3.js
//handleStore相当于控制store的一个函数
function handleStore(store, action){
if(typeof store === undefined){
return false;
}
switch(action.type){
case ‘a‘: return ‘this is A‘; break;
case ‘b‘: return‘this is B‘; break;
case ‘c‘: return ‘this is C‘; break;
default: return ‘this is None‘; break;
}
}
//store通过createStore创建
var store = Redux.createStore(handleStore);
//通过subscribe可以观察到store改变
store.subscribe(function(){
document.getElementById(‘show‘).innerHTML = store.getState().toString();
});
//初始化执行
select(‘‘);
function select(item){
store.dispatch({
type: item
});
}
所有源码：
<!DOCTYPE html>
<html>
<head>
<title>Redux basic example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<div id="container">
<button onClick="select(‘a‘)">click a</button>
<button onClick="select(‘b‘)">click b</button>
<button onClick="select(‘c‘)"> click c</button>
<div id="show"> </div>
</div>
<script>
function handleStore(store, action){
if(typeof store === undefined){
return false;
}
switch(action.type){
case ‘a‘: return ‘this is A‘; break;
case ‘b‘: return‘this is B‘; break;
case ‘c‘: return ‘this is C‘; break;
default: return ‘this is None‘; break;
}
}
var store = Redux.createStore(handleStore);
store.subscribe(function(){
document.getElementById(‘show‘).innerHTML = store.getState().toString();
});
select(‘‘);
function select(item){
store.dispatch({
type: item
});
}
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/sean-/p/5416340.html
