手撕代码地址
手写 redux
./src/redux
与 ./src/reduex1
createStore
./src/redux/store
该函数接收 三个参数,
reducer : 根据接收的action处理state
state :初始状态
enhancer : 接收并处理中间件 返回一个增强的 createStore
并返回 store
getState 获取当前状态
dispatch 用来接收 action 触发 reducer
subscribe 用来发布所有的订阅 ,也可以用来监听回调
enhancer (applyMiddleware)
./src/redux/applyMiddleware
接收一个 中间件 (middleware)
返回一个函数,这个函数接收 createStore 并返回一个 createStore 函数
combineReducer
./src/redux/combineReducers
合并多个 reducer
logger (middleware)
./src/redux/middlewares/logger
中间件的能力 返回一个增强的 dispatch
接收 store 返回一个函数,这个函数接收一个 dispatch,该函数再返回一个接收 action 的函数,这个函数也就是增强后的 dispatch,在这个函数里可以增加自定义的功能
手写实现 react-redux
./src/reactRedux
实现 Provider
./src/reactRedux/Provider
react-redux 的目的是将 redux 与 react 链接起来,利用了 react 本事拥有的 context 重写了其 Provider ,将 store 复制给了 value 传递给子组件
实现 connect
./src/reactRedux/connect
connect 属于高阶组件 , 接受两个函数 mapStateToProps,mapDispatchToProps,将指定的 state 与 dispatch 传递给需要的组件;并返回一个接收组件的函数,该函数同样返回一个组件,这个组件得到了 state 与 dispatch;
在store上注册一个回调,监听状态是否发生变化,通过浅比较判断组件是否需要更新,如果状态变化则强制更新组件,使其页面变化
保证组件更新顺序
react-redux
保证组件更新顺序的方案是在redux store
之外实现的,再单独创建一个单独的监听者类 Subscription
Subscription
负责处理所有的state
的变化回调- 如果当前连接
redux
的组件是第一个连接redux
的组件,也就是说它是链接redux
的根组件,它的state
回调直接注册到redux store
上,同时新建一个Subscription
类创建一个subscription
的实例通过context
连接- 如果当前连接的
redux
的组件不是连接的redux
的根组件,也就是说它上面的组件已经连接到redux store
了,那么它可以拿到上面通过context
传下来的subscription (parentSub)
,那当前组件的更新回调就注册到parentSub
上。同时在新建一个subscription
代替context
上的subscription
,继续放下传,也就是说它的子组件的回调会注册到当前的subscription
上.- 当
state
发生变化,根组件注册到redux store
上的回调会执行更新根组件,同时根组件手动执行子组件的回调,子组件回调执行会触发子组件更新,然后子组件再执行自己subscription
上注册的回调,触发孙子组件更新,孙子组件在执行自己subscription
上的回调。。。,这样就达到了保证组件更新顺序父->子
手写 promiseA+
./src/promise
promises-aplus-tests
验证手写 promise