概述
在react项目中，redux经常用来管理应用的数据，react-redux用来绑定redux, 这样你的组件可以从store中读取数据，并且可以dispatch actions更新store, redux主要思想让系统中的数据按照统一的规则流动，即单项数据流：
如图： 对于组件的修改，通过action被dispatch到store, store根据action和当前的state计算出下一次的state, component拿到更新后的state重新渲染组件；可以看到数据只是单项流动
疑问
- redux中间件redux-thunk，redux-lodder在上图的单向数据流中其实做了什么？
- react组件如何订阅store中state的变化，通过store.subscribe ？ 那么如果保证子组件的订阅更新发生在父组件之后呢？（试想一下：父子组件都订阅了store中某一个state的变化，如果父组件响应订阅更新在子组件之后，子组件可能重复渲染）
- react-redux中的hooks, useSelector, useDispatch, useStore等, 用useSelector替换connect方法？
问题分析
动手实现一个简单的redux, react-redux, 中间件，然后对比一下我们的实现有哪些潜在的问题，实际上怎么解决的
实现一个简单的redux, react-redux
如何使用redux和react-redux, redux.createStore方法创建一个store, store注入到Provider组件上，然后通过connect方法拿到store中的state和dispatcher，然后通过组件的props拿到这些方法和属性
createStore创建store，store对象具有dispatch方法，subscribe方法，getState方法, replaceReducer方法，那么通过观察者模式可以实现
function createStore(reducer, preloadedState) {
let listeners = []
let state = preloadedState
let currentReducer = reducer
let subscribe = (fn) => {
listeners.push(fn)
return () => {
const index = nextListeners.indexOf(listener)
listeners.splice(index, 1)
}
}
let dispatch = (action) => {
state = currentReducer(state, action)
for (let i = 0; i< listeners.length; i++) {
const listener = listeners[i]
listener()
}
}
let getState = () => {
return state
}
let repalceReducer = (nextReducer) => {
currentReducer = nextReducer
dispatch({type:'@@redux/REPLACE'})
}
return {
dispatch
subscribe,
getState,
replaceReducer
}
}
redux实际实现要比这个复杂，比如说listeners存在两个变量中, currentListeners和nextListeners，dispatch执行的总是currentListeners中的函数，subscribe和unsubscibe总是在nextListeners中增加或者移除listener，这样可以避免在dispatching过程中，listeners数组发生改变，上面还可以看到replaceReducer其实更新了state,触发了订阅， replaceReducer用在需要按需加载的reducer场景中，看下combiceReducers的实现，你会发现一次combine几百个reducer并不是一件好事，replaceReducer动态替换reducer提升效率
接下来的问题如何在组件中订阅state的更新，并且可以dispatch action，以更新state；redux-redux使用了Context, redux中的Provider组件就是对Context.Provider做了封装
export const ReactReduxContext = React.createContext(null)
function Provider({store, children, context}) {
const [provider, setProvider] = useState({
state: store.getState(),
dispatch: store.dispatch
})
useEffect(() => {
store.subcribe(() => {
setProvider({
state: store.getState(),
dispatch: store.dispatch
})
})
}, [store])
const Context = context || ReactReduxContext
return {props.children}
}
export default Provider有了Provider组件，我们还需要一个connect函数，connect函数接收mapStateToProps和mapDispatchToProps，返回一个高阶组件，这个高阶组件接收React组件，返回一个PureComponent;
import ReactReduxContext from './Provider'
export default function connect (mapStateToProps, mapDispatchToProps) {
return function (WrappedComment) {
return function (props) {
return (
{
({state, dispatch}) => {
)
}
}
}
其实这个返回的组件，react-redux又用React.memo进行包装，保证只在props发生变化的时候才会重新渲染。react-redux对于connect的实现比这里要复杂得多，如开头提出的问题: react-redux需要保证父组件的更新在子组件之前，react的connect方法其实是对connectAdvanced方法的封装（参见官网），connectAdvanced方法放回一个高阶组件，如上面所封装的connect方法，返回的组件又使用React.memo变为PureComponent, react-redux如何保证父组件订阅store的更新，发生在子组件之前呢？ 也是通过subscirpe方法；每一个connect方法返回的高阶组件内部都用了一个Context.Provider包装WrappedComponent, 她的value为store和Subscription对象,这样每一个子组件的Subscription对象可以拿到离它最近的父组件的Subscription对象，这样形成了一个Subscription对象树，通过Subvcription控制更新顺序， 直接上图
中间件实现
什么是中间件？中间件就是对dispatch方法做了封装，比如说每次dispatch一个action前，我需要发送一条日志，如果不使用中间件，你的做法是