Redux自己手写一个简化版全面的redux

import React from 'react'

//播放器

const renderScreen = (screen)=>{
    console.log("=============>renderScreen");
    //获取页面元素
    const sc = document.querySelector('#screen');
    //对页面元素进行修改
    sc.innerHTML = `${screen.title}:${store.getState().isPlaying}`;
};

const renderButton = (button)=>{
    console.log("=============>renderButton");
    //获取页面元素
    const btn = document.querySelector('#button');
    //对页面元素进行修改
    btn.innerHTML = button.text;
};

//1.全局渲染方法
const renderApp = (state)=>{
    console.log("renderApp state-->",state);
    //渲染屏幕
    renderScreen(state.screen);
    //渲染按钮
    renderButton(state.button);
};

//2.对状态的修改交给纯函数去做
//定义修改数据方法
const changeStateFn = (state,action)=>{
    //首先对操作类型进行判断
    switch (action.type){
        case 'play_video':
            //修改播放状态
            state.isPlaying = true;
            //修改按钮
            state.button = {
                text:'停止'
            };
            state.screen.title = action.title;
            console.log(action,state);
            break;
        case 'stop_video':
            //修改播放状态
            state.isPlaying = false;
            //修改按钮
            state.button = {
                text:'播放'
            };
            state.screen.title = action.title;
            console.log(action,state);
            break;
        case 'play_next':
            state.screen.title = action.title;
            break;
        default:
    }
};

//3.所以我们定义一个createStore来管理全局状态
//直接暴露数据不安全，会带来不可预知的错误
const createStore = (changeStateFn)=>{
    //局部作用域
    //初始化数据
    let state = {
        isPlaying:false,
        screen:{
            title:'java is easy'
        },
        button:{
            text:'播放'
        }
    };
    //声明监听数组
    let listeners = [];
    //获取数据方法
    const getState = ()=>state;
    //来修改数据
    const dispatch = (action)=> {
        //1)修改状态
        changeStateFn(state,action);
        //2)调用所有监听
        listeners.forEach(listener=>listener());
    };
    //提供一个订阅方法
    const subscribe = (listener)=>{
        listeners.push(listener)
    };
    //暴露方法
    return {getState,dispatch,subscribe};
};

//4.使用createStore函数来创建数据逇管理对象
const store = createStore(changeStateFn);

//当状态发生修改时候
store.subscribe(()=>{
    //重新渲染
    renderApp(store.getState());
});

//5.全局初始化
renderApp(store.getState());

//6.对按钮进行监听
document.querySelector("#button").addEventListener('click',()=>{
    //判断播放状态
    if(!store.getState().isPlaying){
        store.dispatch({type:'play_video',title:'发现不断，精彩不停...'});
        setTimeout(()=>{
            store.dispatch({type:'play_next',title:'每一次相遇都不是偶然'});
        },2000);
    }else {
        store.dispatch({type:'stop_video',title:'下班了再见'});
    }
});
Redux自己手写一个简化版全面的redux

猜你喜欢
