Redux原理

Redux是什么

很多人认为redux必须要结合React使用，其实并不是的，
Redux 是 JavaScript 状态容器，只要你的项目中使用到了状态，并且状态十分复杂，那么你就可以使用Redux管理你的项目状态，它可以使用在react中，也可以使用中在Vue中，当然也适用其他的框架。

1、为什么要使用redux?

2.redux的核心原理是什么?

• 将应用的状态统一放到state中，由store来管理state。
• reducer的作用是返回一个新的state去更新store中对用的state。
• 按redux的原则,UI层每一次状态的改变都应通过action去触发，action传入对应的reducer 中，reducer返回一个新的state更新store中存放的state，这样就完成了一次状态的更新。
• subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dipatch发起后依次执行。
• 可以添加中间件对提交的dispatch进行重写。

3.redux的api有哪些?

• createStore 创建仓库，接受reducer作为参数。
• bindActionCreator 绑定store.dispatch和action 的关系。
• combineReducers 合并多个reducers。
• applyMiddleware 洋葱模型的中间件,介于dispatch和action之间，重写dispatch。
• compose 整合多个中间件。

接下来我们来依次实现createStore、bindActionCreator、combineReducers、applyMiddleware、compose

createStore的实现

function createStore (reducer, enhancer) {
    if (enhancer) {
        enhancer(createStore)(reducer)
    }
    let currentState = {} //这就是前面提到的store管理的state
    let currentListener = [] //这是前面提到的为store添加监听函数
    
    function subscribe (func) {
        currentListener.push(func)
    }
    
    function getState () {
        return JSON.parse(JSON.stringify(state));
    }

    funtion dispatch (action) {
        currentState = reducer(currentState, action)
        currentListener.map(listen => listen()) //每当发生依次dispatch后都会遍历监听函数并执行
        return action
    }

    return {
        subscribe,
        getState,
        dispatch
    }
}

注意: createStore并没有直接返回store中存放的state，而是返回一个函数getState来获取state，当我们调用getState去获取state时，需要返回一个state的复制品，也就是需要返回一个深拷贝state之后对象，这样可以避免state值的非法篡改，因为如何直接返回state的话，只需通过state[key] = xxxx就能对state进行修改，违背了redux只能通过dispatch(action)去更新state。

bindActionCreator的实现

function bindActionCreator (creators, dispatch) {
    let bound = {}
    Object.keys(creators).map(key =>{
        const creator = creators[key]
        bound[key] = (..args) => dispach(creator(...args))
    })
    return bound
}

bindActionCreator是为action函数外面包一层dispatch，这样在进行action发起时无需再手动dispatch了。

combineReducers的实现

function combineReducers (reducers) {
    const reducersKeys = Object.keys(reducers),
    finalReducers = {}
    for (let i = 0; i < reducerKeys.length; i++) {
        if (typeof reducers[i] === 'function') {
            finalReducers[i] = reducers[i]
        }
    }
    const finalReducersKeys = Object.keys(finalReducers)
    return function combination (state={}, action) {
        let hasChanged = false,
            nextState = {}
        for (let i = 0; i < finalReducersKeys.length; i++) {
            const key = finalReducersKeys[i],
            reducer = finalReducers[key],
            preStateKeys = state[key],
            nextStateKeys = reducer(preState, action),
            nextState[key] = nextStateKeys
            hasChanged = hasChanged || preStateKeys !== nextStateKeys
        }
        return hasChanged ? nextState : state
    }
}

applyMiddleware的实现

function applyMiddleware (...middlewares) {
    return createStore => (...args) => {
        const store = createStore(...args)
        let { getState, dispatch } = store
        const middlewateApi = {
            getState,
            dispatch: (...args) => dispatch(...args)
        }
        const middlewareChain = middlewares.map(middleware => middlware(middlewareApi))
        dispatch = compose(...middlewareChanin)(dispatch)
        return {
            store,
            dispatch
        }
    }
}

compose的实现

function compose (...funcs) {
    if(funcs.length === 0) {
        return args => args
    }
    if (funcs.length === 1) {
        return funcs[0]
    }
    return funcs.reduce( (ret, item) => (...args) => ret(item(...args)) )
}

compose是整合多个中间件的情况，这里使用reduce对用传入的中间件进行累加执行。

作者：DBCdouble
链接：https://juejin.cn/post/6844903773203070990
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。