【Redux】Redux知识点梳理

沈梦研

已于 2024-11-22 23:17:55 修改

阅读量691

点赞数 2

文章标签：前端 react.js

于 2020-11-08 15:50:56 首次发布

本文链接：https://blog.csdn.net/Sharon598/article/details/109560211

版权

为什么需要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)

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