封装redux中的createStore

redux用于react中的状态管理，其中不能直接修改redux中的状态，需要通过dispatch方法才能修改react中的状态。

createStore函数中存放着状态信息state，它的执行结果返回一个store对象，返回的对象包含：

• getState(获取store中的state状态信息，但是不能直接修改store中的state信息)
• dispatch(修改store中的state信息)
• subscribe(用于订阅事件)

<div>
    <div id="title"></div>
    <div id="content"></div>
</div>
<script>
    function createStore(reducer) {
        // 定义store对象中的状态信息对象，此处必须是只定义不赋值，因为这样在下面的dispatch初始化state时才能使用默认值初始化state
        let state;
        // listener是一个事件池，存储订阅的方法
        let listener = [];
        // 在createStore作用域下创建getState函数，该函数需要返回一个新对象，该对象需要和state一样。这个方法只用于获取state
        // 深克隆：将当前作用域下的state深克隆一份，让外界利用这个方法只能获取state不能修改state
        let getState = () => JSON.parse(JSON.stringify(state));
        // 定义修改state的函数dispatch。action中的type一般是const大写的常量
        function dispatch(action) {
            state = reducer(state,action);
            // 在dispatch中执行订阅的方法
            listener.forEach((item,index)=>{
                if(typeof item==="function"){
                    item();
                }
            });
        }
        // 这个函数的执行是在初始化state对象
        dispatch({});
        // 在createStore中有一个订阅方法subscribe，该函数返回取消订阅的函数
        let subscribe = (fn)=>{
            listener.push(fn);
            // 返回取消订阅的方法，当返回值执行时就会取消该订阅
            return ()=>{
                listener = listener.filter(item=>item!==fn);
            };
        };
        return {
            getState, dispatch,subscribe
        };
    }
    let initState = {
        title: { color: 'red', text: '你好' },
        content: { color: 'yellow', text: '中国' }
    };
    const CHANGE_TITLE_TEXT = "CHANGE_TITLE_TEXT";
    const CHANGE_CONTENT_COLOR = "CHANGE_CONTENT_COLOR";
    function reducer(state = initState, action) {
        switch (action.type) {
            case CHANGE_TITLE_TEXT:
                // 当解构出现重名，后面覆盖前面
                return { ...state, title: { ...state.title, text: action.text } };
            case CHANGE_CONTENT_COLOR:
                return { ...state, content: { ...state.content, color: action.color } };
            default:
                return state;
        }
    }
    let store = createStore(reducer);
    // 数据渲染title、content
    function renderTile() {
        let title = document.getElementById("title");
        title.innerHTML = store.getState().title.text;
        title.style.color = store.getState().title.color;
    }
    function renderContent() {
        let content = document.getElementById("content");
        content.innerHTML = store.getState().content.text;
        content.style.color = store.getState().content.color;
    }
    function renderApp() {
        renderTile();
        renderContent();
    }
    renderApp();
    // redux中规定，不能直接修改state中的数据，必须通过dispatch来修改state中的数据
    let f = store.subscribe(renderApp);
    // f();//这个方法执行就会取消订阅的方法
    setTimeout(() => {
        store.dispatch({ type: CHANGE_TITLE_TEXT, text: '加油' });
        store.dispatch({ type: CHANGE_CONTENT_COLOR, color: 'black' });
        // renderApp();
    }, 3000);
</script>