Redux的简易版原理封装

Redux封装案例参考与实现

最新推荐文章于 2025-06-26 16:48:21 发布

原创最新推荐文章于 2025-06-26 16:48:21 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

参考之前这篇文章里面的案例我们做一下redux的封装

Redux的基本使用_湖边看客的博客-优快云博客

在案例中我们用到了一下三个方法

结合发布订阅的原理

代码如下:

function createQvStore(reducer) {
    var list = []
    //第一次调用reducer
    var state = reducer(undefined, {})

    //订阅    
    function subscribe(callback) {
        list.push(callback)
    }

    //发布
    function dispatch(action) {
        //第二次调用reducer   会覆盖 初始的值
        state = reducer(state, action)

        for (var i in list) {
            list[i] && list[i]()
        }
    }

    //拿数据
    function getState() {
        return state
    }

    return {
        subscribe,
        dispatch,
        getState
    }
}