redux是一个可以实现所有组件可读取的“全局变量”,这与react的本意有点相违背,但是某些特殊情况下,组件多层嵌套,如果通过传统的props,父传子,子传孙,会很麻烦,所以redux的意义就很明显了
虽然redux这一套已经相当成熟了,但是还是可以通过自己实现这一功能
在原版redux中,可以通过createStore方法返回一个store对象,用来储存管理所有的全局数据
const reducer = (state={} , action) => {
return {...state, payload: action.payload};
};
const store = createStore(reducer);reducer为一个函数,每次通过store.dispatch后会调用该reducer函数,通过返回的新state对象来作为sttore的新state(redux中的state与react中的state不是同一个东西)
我们可以通过先创建一个Myredux类来实现这一功能
createStore函数要完成的事就是:
- 将reducer函数保存下来,以便后面可以通过dispatch调用
- 初始化store的state
- 返回一个MyRedux实例
由于是仿造原版redux,所以尽量不改变原版reducer函数的写法,在初始化store的state时,向reducer中传入undefind和一个空action对象,完成store的state的初始化
创建了一个myStore后,还缺少原版store暴露在外的dispatch、getState和subscribe方法
所以可以直接在class里面编写即可
- dispatch
这里实现原版redux的dispatch主要功能,更新MyStore内部的state为reducer函数返回的新state对象,然后调用nextListener(后面再说)来实现监听功能,最后将此次的action原封不动return
- getState
这个相对来说简单一点,直接返回本身的state即可
- subscribe
subscribe是一个高阶函数,接受一个listener函数,作为每次每次dispatch后需要执行的函数,由于是监听函数,所以就应该像添加时间监听一样,后者不会覆盖前者,所以在构造函数上定义listeners为一个数组,一旦调用subscribe后将传入对的function存入该数组,同时为传入的函数添加回调参数,为当前state,最后return一个function,原版redux如果执行subscribe返回的这个函数,则取消所有监听事件的触发于是我们将listeners清空即可
码云地址:https://gitee.com/onezilc/MyRedux.git