<1> 需求
如果,我们有这样一个需求:有多个组件需要使用同一组数据,if 我们分别在每个组件中发起请求,就会出现性能问题,会发起多次重复的请求,所以我们就想把这组数据存在 redux 的 store 状态树中进行管理,看页面先展示哪个组件,就在哪个组件中发起请求,其余的组件使用缓存即可!!!
所以就需要在每个组件中进行判断,如果该数据已经被请求,就使用缓存,如果没有,就在该组件中发起请求!!!
<2> 存在的异步问题
然后我们需要考虑到,数据请求存在异步问题,即数据请求回来是需要一段时间的。那这段异步代码要写在哪?
写在reducer? 那么就是在 reducer 处理函数中发起请求,无法解决异步问题!!会直接返回新状态!!但此时数据还没响应,就无法更新新状态!!
<3> 解决方案
Redux 给我们提供了解决方案!!即使用它提供的中间件,**通过创建异步的 action **解决!!!
(1) redux-thunk 中间件
普通的 createAction() 函数:
普通的创建对象的函数,就是返回一个 action 对象,然后在需要触发该 action 时,再手动把该对象通过 dispatch() 派发出去即可!!
使用了 redux-thunk 中间件 的createAction() 函数:
使用了
redux-thunk 中间件,action 创建函数就可以返回一个函数,然后就可以在该函数中,实现一些异步的操作(发起请求...),并且该函数会接收一个参数dispatch ,该中间件会在确定数据返回后,再执行dispatch函数!!!
中间件源码如下:
即会在每个 action 创建函数中进行判断,如果返回的是一个对象,就按照普通的同步方法执行,直接返回该对象;如果返回的是一个函数,那么就会先执行该函数内部的异步操作,等异步操作完成后,再在内部调用 dispatch 函数!!!
注意:
- 要把获得数据,存为 action 对象中的一个属性,然后 dispatch() 出去,在 reducer 处理函数中,接收该对象,然后把状态更新就行!!
然后在 reducer 处理函数中,把携带着数据的 action 对象,取出里面的数据,更新到状态树即可!!
(2) redux-promise 中间件
该中间件允许action 创建函数返回一个Promise对象,然后在该 Promise 对象上调用
.then()方法,并在里面写上,成功处理程序函数:返回携带着数据的 action 对象