redux模拟实现

        //发布订阅模式
        //也称作观察者模式,定义了对象间的一对多的依赖关系,
        //当一个对象的状态发 生改变时,所有依赖于它的对象都将得到通知
        //createStor dispatch subscribe
        class MyRedux{
            constructor(){
                this.container = []
            }
            getState(){
                return this.state
            }
            subscribe(fn){//订阅函数,订阅一些更新逻辑
                this.container.push(fn)
            }
            notify(value){//发布订阅
                this.container.forEach((fnItem)=>{
                    fnItem(value)
                })
            }
            dispatch(action){
                //调用reducer传入上次的state值,它的返回值覆盖上次的state
                this.state = this.reducer(this.state,action)
                //this.state如果发生了改变,那么就发布  immer
                this.notify(this.state)
            }
            static instanceStor
            static createStor(reducer){
                if(MyRedux.instanceStor){
                    return MyRedux.instanceStor
                }else{
                    //实例化仓库
                    let store = new MyRedux()
                    //初次是state是undefined,reducer返回赋值给store
                    store.state = reducer(undefined,{})
                    //挂载reducer
                    store.reducer = reducer
                    //返回
                    return MyRedux.instanceStor = store
                }
            }
        }
        //声明初始值
        const defaultState = {
            username:'zhangsan'
        }
        //创建store仓库并传入reducer,store就是创建的仓库实例
        let stor = MyRedux.createStor((state=defaultState,action)=>{
            console.log(state,action);
            switch(action.type){
                case 'changename':
                    return {...state,username:action.value}
                default:
                    return {...state}
            }
        })
        //订阅仓库
        stor.subscribe((value)=>{
            console.log(value,'仓库值更新后同步刷新组件视图')
        })
        console.log(stor.getState().username)
        //提交action
        stor.dispatch({
            type:'changename',
            value:'lisi'
        })
        console.log(stor.getState().username)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值