React

Redux中间件(二):手写简单版redux

2021-01-07  本文已影响0人  Viewwei

查看Redux的源码非常简单,他的核心思想就是在createStore中申明一遍变量来保存state值,然后在申明一个数组来保存订阅的值,当执行store的getState函数的时候,就直接返回state的变量,dispath 就是保存变量的数组,让它执行保存的方法就可以了,订阅就是把监听器保存到订阅的变量中,已方便dispatch时候更细。实例代码如下

export default function createStore(reducer){
    // reducer 表示一个函数
    let currentState; //定义变量保存state
    let currentListeners =[] //保存监听器
    function getState() { //获取state值
        return currentState
    }
    function  dispatch(action) { //dispath函数
        currentState = reducer(currentState,action)
        currentListeners.forEach(listener =>listener()) //组件更新
    }

    function subscribe(listener) { //订阅函数
        currentListeners.push(listener)
      //返回一个函数,已方便取消订阅
        return () =>{
            const index = currentListeners.indexOf(listener)
            currentListeners.splice(index,1)
        }
    }
    dispatch({type:"REDXXXXXXXX"}) //dispatch一下主要是使用默认值
    return {
      //返回这个对象
        getState,
        subscribe,
        dispatch
    }

}

成功实例:点击添加可以正常使用


image.png
上一篇 下一篇

猜你喜欢

热点阅读