redux和react-redux实现原理解析

概述

在react项目中,redux经常用来管理应用的数据,react-redux用来绑定redux, 这样你的组件可以从store中读取数据,并且可以dispatch actions更新store, redux主要思想让系统中的数据按照统一的规则流动,即单项数据流
redux和react-redux实现原理解析_第1张图片

如图: 对于组件的修改,通过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控制更新顺序, 直接上图
redux和react-redux实现原理解析_第2张图片

中间件实现

什么是中间件?中间件就是对dispatch方法做了封装,比如说每次dispatch一个action前,我需要发送一条日志,如果不使用中间件,你的做法是

你可能感兴趣的:(javascript,前端,react.js)