手撕 redux 与 Promise 总结

手撕代码地址

手撕地址

手写 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