redux 入门教程1

最新推荐文章于 2024-09-09 23:43:17 发布

weixin_30340745

最新推荐文章于 2024-09-09 23:43:17 发布

阅读量61

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sean-/p/5416340.html

版权

新手看网上一些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>

转载于:https://www.cnblogs.com/sean-/p/5416340.html

weixin_30340745

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
redux 入门教程1

新手看网上一些redux文章，很容易被那些概念搞糊涂，本人照着官方例子打算写个系列新手教程，大家可以参考下，转载请注明出处redux 理念详解：http://zhuanlan.zhihu.com/haochuan/20641377教程1即没有用到react,也没有用到npm这些东西，非常适合大家从本质上理解redux。1.加载redux.js <script src="htt...
复制链接

扫一扫