redux 入门教程1

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