redux知识点梳理

120 阅读3分钟

目录

为什么需要redux?

redux数据流模式?

redux源码实现原理?

redux监听器的原理?

react-redux实现原理?

什么是中间件?

中间件都有哪些?


为什么需要redux?

react作为一个组件化开发框架,组件之间存在大量通信,很多都是跨多个组件通信,或者多个组件之间共享一套数据,所以需要redux

      既然要存取状态,肯定要有setter/getter,当状态发生时,需要广播,通知组件状态发生变化,所以需要redux的getState、dispatch、subscribe

1、getState实现 ——返回当前状态即可

2、dispatch实现

有条件的、具名的修改store的状态,给dispatch传一个action,里面包括要修改的state和这个操作的名字actionType

3、抽出修改state的部分——reducer


redux数据流模式?

        用户通过点击等等一些事件,触发一个action,通过store.dispatch分发这个action,通过Reducer这个存函数去改变store中的状态,通过监听事件subscribe监听store的变化,然后才会视图层更新


redux源码实现原理?

       首先思考一下,如果想在每次dispatch之后,打印一下store的内容,如何实现?

1、每次dispatch后手动打印store内容

但不可能每次都这样打印,所以,

2、封装dispatch

但每次使用dispatch都要从外部引用,所以,

3、替换dispatch

但如果需要监控dispatch错误的需求呢,所以

4、模块化

把不同的功能的模块拆分成不同的方法,在方法内,获取上一个中间件包装过的store.dispatch实现链式调用,然后通过调用这些中间件方法,分别使用、组合这些中间件

以上是先获取dispatch,然后在方法内替换dispatch;

但如果不在方法内替换dispatch,而是返回一个新的dispatch,让循环来进行每一步的替换,所以

5、applayMiddleware添加中间件

先直接返回新的dispatch, 即中间件logger

   添加中间件,(由于循环替换dispatch时,前面的中间件在最里面,所以需要数组翻转,才能保证中间件的调用顺序)

然后就可以增加中间件了

   但因为在函数内修改了store的dispatch,产生了副作用,所以,把applayMiddleware作为高阶函数,增强store,而不是替换dispatch

6、改造createSotre,传入heightener(即applayMiddleware)

让next通过参数传入

改造applayMiddleware

 compose取代了middleware.reverse(), 是一种组合函数的方法,把传入的中间件编程了

  (...arg) => mid3(mid1(mid2(...arg)))这种形式

7、洋葱圈模型

     

   


redux监听器的原理?

store的变化不会直接引起视图更新,需要监听store的变化,所以,

       先用正常想法思考一下,需要每个观察者都有一个update方法,当被观察者发出通知后,执行update方法;被观察者拥有addObserver(添加观察者,将所有观察者的update放在一个队列里)和notify方法,当notify执行的时候,从队列中取出所有观察者的update方法并执行,就实现了通知的行为。

       

       所以subscribe的实现就是把dispatch和notify做了合并,每次dipatch,都进行广播,通知组件store的状态发生了改变

       

测试一下

        

        


react-redux实现原理?

react-redux提供了Provider和connect两个API,Provide将store放进this.context里,connect将getStte、dispatch合并到this.props,并自动订阅更新

 1、Provider实现

是一个组件,接收store并放进全局的context对象,为connect获取状态提供途径,在组件中通过this.context.store取到store

       

2、connect实现

connect接收mapStateToProps、mapDispatchToProps两个方法,然后返回一个高阶函数,这个高阶函数接收一个组件,返回一个高阶组件(其实就是给传入的组件添加一个写属性和功能),将state和dispatch(action)挂载在子组件的props上

       


什么是中间件?

       其实就是拦截器,对于某个过程进行拦截和处理,redux中间件,拦截的就是dispatch提交到reducer的这个过程,增强dispatch的功能;


中间件都有哪些?

        redux-logger:提供日志输出

        redux-thunk: 处理异步操作,对actionCreator进行操作; 判断action === ‘function’ ? return action(dispatch, geState, extraArgument) : return  next(action)

        redux-promise:处理异步操作

        redux-saga: 把所有的异步请求放在了saga.js(mySaga)文件中,文件中通过使用redux-sage的call、put、takeEvery、takeLatest方法方法封装成一个异步的一个文件,当组件中通过dispatch(action)提交action后,会在saga.jswenjian zhong 的generater(本质就是一个状态机,通过。next() 调用)中监测到,通过redux-saga的createSagaMiddleware().run(mySaga)


以上是本人参考多番文档资料,思考总结,有错误欢迎各位大佬指正,非常感谢!