Redux 封装!

Redux
Redux 封装

  • 我们将最新状态放到了createStore函数中进行封装!_,生成 dispatch函数,操作 state,触发视图更新。(redux.js)
export function createStore(reducer) {
    <-- 给 state一个为 null的初始值 -->
    let state = null;
    <-- 创建一个放置事件的事件池(数组) -->
    const listener = [];
    <-- 这个函数负责向事件池中添加事件; -->
    const subscribe = (f) => listener.push(f);    
    <-- 这个函数负责获取当前 state值,创造一份和状态同样的对象给外界来用 -->
    const getState = () => { return state };  
    <-- 获取旧的 state值 -->
    let oldState = state; 
    <-- 这个函数负责获取当前用户传输的 action实参 -->
    const dispatch = (action) => {
    	<-- 获取曾经还未覆盖的 start值 -->
        oldState = state;
        <-- 获取当前 state值覆盖掉store中旧的 state值 -->
        state = reducer(state, action);
        <-- 更新完成之后 重新渲染 -->
        listener.forEach(item => item && item(oldState));
    }
    <-- 默认传入空对象获取reducer返回的默认结果,为了初始化数据 -->
    dispatch({});
    return { 
        getState,
        dispatch,
        subscribe,
        listener
    }   
}

猜你喜欢

转载自blog.csdn.net/weixin_43618932/article/details/88359718