Redux用法简单示意

作者: 我也不知道啊丶 | 来源:发表于2019-01-08 17:00 被阅读0次

Redux用法简单示意
React 入门的一些文章
Redux简介
redux基础
redux-actions学习笔记
7.Redux学习体会
generator函数
Redux-基础
阅迹（一）
redux用法和原理

Redux用法简单示意

<!DOCTYPE html>
<html lang="zh-CN">
<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>Redux-01</title>
</head>
<body>
    <div id="app">

    </div>
</body>
<script src="https://cdn.bootcss.com/redux/4.0.1/redux.min.js"></script>
<script>
    function add1(){
        store.dispatch({type:'add',payload:1})
    }
    function add2(){
        store.dispatch({type:'add',payload:2})
    }
    function minus(){
        store.dispatch({type:'minus',payload:1})
    }
    function add1IFodd(){
        let oldState = store.getState()
        if(oldState%2 === 1){
            store.dispatch({type:'add1IFodd',payload:1})
        }
    }
    function add1After2s(){
        setTimeout(() => {
            add1()
        }, 2000);
    }
    function render(){
        let app = document.querySelector('#app')
        app.innerHTML = `
            <div>
                你点击了 <span id='value'>${store.getState()}</span> 次
                <div>
                    <button id='add1' onClick='add1()'>+1</button>
                    <button id='add2' onClick='add2()'>+2</button>
                    <button id='minus1' onClick='minus()'>-1</button>
                    <button id='add1IFodd' onClick='add1IFodd()'>如果是单数就+1</button>
                    <button id='add1After2s' onClick='add1After2s()'>两秒钟后+1</button>
                </div>
            </div>
        `
    }
    function counter(state, action) {
        if (typeof state === 'undefined') {
          return 0
        }
        switch (action.type) {
          case 'add':
            return state + action.payload
          case 'minus':
            return state - action.payload
          case 'add1IFodd':
            return state + action.payload
          default:
            return state
        }
      }
      var store = Redux.createStore(counter)
    render(store)
    store.subscribe(()=>{
        render(store)
    })
</script>
</html>