reudx的大概原理 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>redux原理</title>
</head>
<body>
    <button onclick="store.dispatch({type:'JIAN',n:2})">-</button><span id="countDisplay">10</span><button onclick="store.dispatch({type:'JIA',n:3})">+</button>
</body>
<script>
    const countDisplay = document.querySelector('#countDisplay')
    //因为countState是全局的
    const countState = {count :5};

    const changeState =(state,action)=>{
        console.log('执行了3')
        if(!state){
            console.log('执行了4')
            return countState
        }
        switch(action.type){
            case 'JIA':
            // state.count +=action.n

            return {
                ...state,count: state.count+ action.n
            }
             break;
            case 'JIAN':
            //state.count -=action.n
            
            return {
                ...state,count: state.count+action.n
            }
             break;
            default:
                break

        }

    }
    //创建
    const createStore = (changeState)=>{
        let state = null
        const getState = ()=>state
        const listeners = []
        const subscribe =(method)=>{
            listeners.push(method)
        }
        const dispatch = (action)=>{
            //因为不是全局的了，渲染只会渲染store返回的state，所以需要将最新的改变的值赋值给store返回的state中才能实现渲染，然后重新调用changeState方法的时候又将store内部最新的state传递进去在此基础上继续修改
            state=changeState(state,action)
            listeners.forEach(method=>method())
           // renderCount()
            //用数组将要执行的方法保留起来，因为除了renderCount可能还有render其他的需求
        }
        console.log('执行了1')
        dispatch({})
        console.log(listeners.length)
        console.log('执行了2')
        return {
            getState
            ,dispatch,
            subscribe

        }

    }



    // const renderCount  =(state)=>{
    //     countDisplay.innerHTML = state.count

    // }
    //renderCount(countState)
    // const jian =(n)=>{
    //     countState.count=countState.count-n
    //     renderCount(countState)
    // }
    
    // const dispatch =(action )=>{
    //     changeState(action)
    //     renderCount(countState)
    // }
    const store = createStore(changeState)
        
    const renderCount  =()=>{
        console.log(5)
    countDisplay.innerHTML = store.getState().count
    }
    //需要自己手动执行一次
    renderCount()
    store.subscribe(renderCount)
</script>
</html>

　　

 posted on 2020-08-16 16:08  改变一下  阅读(177)  评论(0)    收藏  举报