Redux-thunk原理探析
十一月 06, 2020
本文共计:
591 字
预计阅读时长:
2分钟
Redux
的作用这里就不做过多赘述,简单看下Redux
原理:
小tip:纯函数的核心理念在于:出参始终依赖于入参,不受外部的任何影响,也就是不会因为何时、何处调用而影响
。
可以很直观的看到,用户
从UI
层面触发一系列的DOM
事件,进而去dispatch
action
,将dispatch
这个动作的处理交给reducer(纯函数)
去做进一步处理。
Redux-thunk
做了什么?
它是为了处理异步action
的,因为在项目中难免会有异步请求数据,往redux中塞入获取的数据
这样的动作。
但是,它究竟做了什么呢?
可以看看源码,一窥究竟:
1 | // 创建thunk-middleware |
在action
的时候处理异步任务,在结束时,dispatch
对应的reducer case
。
store
组织
1 | import { createStore, applyMiddleware } from 'redux'; |
End
与thunk
相似的工具还有saga
,但是saga
的设计更像是vuex
中那样,把异步action
剖离出来。利用了generator
的写法,单独的saga
文件去将异步同步化。
简单赘述一下Redux-saga
处理流程:
先说明下Redux-MiddleWare
的处理流程;
saga
提供的effets
会在处理完毕异步任务后,重新dispatch
reducer
中的action
去更新store
。监听用户action
,将saga
处理的异步action
独立出来。
小Tip:
什么是中间件?中间件是介于系统某几个部分的衔接应用
,它可能只是简单地做一些数据交换任务,不处理业务逻辑,不处理底层硬件逻辑。
查看评论