redux的使用demo

最新推荐文章于 2024-08-31 09:16:08 发布

zjwzhoujiawen

最新推荐文章于 2024-08-31 09:16:08 发布

阅读量312

点赞数

分类专栏： html 文章标签： html redux

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>Redux basic</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
  </head>
  <body>
    <div>
        <p>
            <span id="colorEl">Watch my color.</span>
        </p>
         <button id="red">RED</button>
         <button id="green">GREEN</button>
         <button id="toggle">TOGGLE</button>
    </div>
    
    <script type="text/javascript">
        var initialState = {
            color: 'red',
            kk:2,
        }
        
        function color(state, action) {
            if(typeof state === 'undefined') {
                return initialState
            }

            switch(action.type) {
                case 'RED' : 
                    return { color: 'red',kk:1}
                case 'GREEN' : 
                    return { color: 'green',kk:3}
                case 'TOGGLE' :
                    var stateValue = store.getState();
                        stateValue.color = state.color === 'red' ? {color:'green'} : {color:'red'};
                    return stateValue
                default :
                    return state
            }
        }

        var store = Redux.createStore(color)
        var colorEl = document.getElementById('colorEl')

        function renderValue() {
            colorEl.style.color = store.getState().color;
            colorEl.innerText = colorEl.innerText + store.getState().kk;
        }

        renderValue()
        //注册监听器
        store.subscribe(renderValue)

        document.getElementById('red').addEventListener('click', function(){
            store.dispatch({
                type: 'RED'
            })
        })

        document.getElementById('green').addEventListener('click', function(){
            store.dispatch({
                type: 'GREEN'
            })
        })

        document.getElementById('toggle').addEventListener ('click', function(){
          store.dispatch({
            type: 'TOGGLE'
          })
        })

    </script>>
  </body>
</html>