您的位置：首页 > 其它

redux 入门教程1

2016-04-21 11:47 232 查看

新手看网上一些redux文章，很容易被那些概念搞糊涂，本人照着官方例子打算写个系列新手教程，大家可以参考下，转载请注明出处

redux 理念详解：http://zhuanlan.zhihu.com/haochuan/20641377

教程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的一个函数，也就是reducers

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航