Redux原理

最新推荐文章于 2024-07-18 13:11:52 发布

门门men

最新推荐文章于 2024-07-18 13:11:52 发布

阅读量410

点赞数

分类专栏： React

原文链接：https://juejin.cn/post/6844903773203070990

版权

React 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Redux是什么

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

1、为什么要使用redux?

随着互联网的高速发展，我们的应用变得越来越复杂，进行导致我们的组件之间的关系也变得日趋复杂，往往需要将状态父组件 -> 子组件 -> 子子组件 -> 又或者只是简单的父组件与子组件之间的props传递也会导致我们的数据流变得难以维护，因为二次开发者不在熟悉项目的情况下无法第一时间确定数据来源是由谁发起的。使用redux之后，所有的状态都来自于store中的state，并且store通过react-redux中的Provider组件可以传递到Provider组件下的所有组件，也就是说store中的state对于Provider下的组件来说就是全局的。

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)) )
}