Redux实现

实现createStore

接受一个reducer函数，返回 dispatch, getState,subscribe等方法

function createStore(reducer) {
    
    let currentState;
    let listeners = [];

    function dispatch(action) {
        currentState = reducer(currentState, action)
        listeners.forEach(fn => fn())
    }
    
    function getState() {
        return currentState
    }
    
    function subscribe(fn) {
        listeners.push(fn)
        //返回取消订阅的函数
        return () => {
            for (let i = 0; i < listeners.length; i++) {
                if (listeners[i] === fn) {
                    listeners.splice(i, 1)
                    break
                }
            }
        }
    }
    //调用一次dispatch，初始化State
    dispatch({ tyep: null })

    return {
        dispatch,
        getState,
        subscribe
    }
}

测试代码

const store = createStore(reducer, applyMiddleware(logger, thunk))

const reducer = function (state = { count: 1, nub: 1 }, action) {
    switch (action.type) {
        case "count-add":
            return { ...state, count: state.count + 1 }
        case "nub-add":
            return { ...state, nub: state.nub + action.payload }
        default:
            return state
    }
}

const store = createStore(reducer)

const unsubscribe = store.subscribe(() => {
    console.log('subscribe', store.getState());
});

store.dispatch({ type: 'count-add' })
store.dispatch({ type: 'nub-add', payload: 2 })
console.log(store.getState());
unsubscribe();
store.dispatch({ type: 'count-add' })
console.log(store.getState());

实现applyMiddleware

applyMiddleware是一个函数，接受n个中间件作为参数。

applyMiddleware的使用方式如下：

const store = createStore(reducer, applyMiddleware(logger1, logger2))

中间件的定义如下：

store:store对象。

next：下一个执行的中间件函数。

action：接受到的action对象。

function logger1(store) {
    return function (next) {
        return function (action) {
            console.log('logger1');
            next(action)
        }
    }
}

applyMiddleware作为createStore的第二个参数

createStore修改如下：

function createStore(reducer，enhancer) {
    //在原来代码基础上增加如下代码
    if (enhancer && typeof enhancer == 'function') {
        // 返回增强版的createStore
        return enhancer(createStore)(reducer)
    }
    ...
    //其它不变
}

所以applyMiddleware是一个函数

接受中间件函数，返回的一个函数接受createStore，返回加强版的createStore函数

//接受n个中间件函数
function applyMiddleware(...middlewares) {
    //接受createStore函数
    return function (createStore) {
        // 返回扩展的createStore函数
        return function (reducer) {
            
        }
    }
}

实现applyMiddleware，可以接受中间件扩展dispatch功能

function applyMiddleware(...middlewares) {
    return function (createStore) {
        return function (reducer) {
            // 首先创建一个初始的store
            let store = createStore(reducer)
            // 将store传入每一个中间件并获得返回的函数
            // newMiddlewares里的每一个函数形式变为
            // function logger1(next) {
            //     return function (action) {
            //         console.log('logger');
            //         next(action)
            //     }
            // }
            let newMiddlewares = middlewares.map(middleware => middleware(store));
            // 假设只有一个logger中间件，加强版的dispatch函数会变成
            // logger1(dispatch)
            // 即是
            // function (action) {
            //     console.log('logger');
            //     dispatch(action)
            // }
            // 若有两个
            // logger2(logger1(dispatch))
            let dispatch = store.dispatch
            for (let i = newMiddlewares.length - 1; i >= 0; i--) {
                dispatch = newMiddlewares[i](dispatch)
            }
            // 返回增强版的store api
            return {
                ...store,
                dispatch
            }
        }
    }
}

测试代码

function logger1(store) {
    return function (next) {
        return function (action) {
            console.log('logger1');
            next(action)
        }
    }
}

function logger2(store) {
    return function (next) {
        return function (action) {
            console.log('logger2');
            next(action)
        }
    }
}

const store = createStore(reducer, applyMiddleware(logger1, logger2))

combineReducers实现

接受多个reducer返回一个reducer

function combineReducers(reducers) {
    let reducerKeys = Object.keys(reducers);
    return function reducer(state, action) {
        //第一次初始化时state为undefined
        if (!state) {
            state = {}
        }
        //防止修改值时的对象引用问题
        state = JSON.parse(JSON.stringify(state))
        for (let i = 0; i < reducerKeys.length; i++) {
            let key = reducerKeys[i];
            let reducer = reducers[key];
            state[key] = reducer(state[key], action)
        }
        return state
    }
}

测试代码

const countReducer = (count = { count1: 1, count2: 2 }, action) => {
    switch (action.type) {
        case 'count-add':
            count.count1 += 1
            return count
        default:
            return count
    }
}

const nubReducer = (nub = 1, action) => {
    switch (action.type) {
        case 'nub-add':
            return nub + action.payload;
        default:
            return nub
    }
}

const store = createStore(combineReducers({ countReducer, nubReducer }), applyMiddleware(logger1, logger2))
store.dispatch({ type: 'count-add' })
console.log(store.getState());
store.dispatch({ type: 'nub-add', payload: 2 })
console.log(store.getState());
store.dispatch({ type: 'count-add' })
console.log(store.getState());