概述
在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前,我需要发送一条日志,如果不使用中间件,你的做法是