React知识点整理-Redux(三)

React中间件

在我们之前的demo中，redux保存的counter是我们本地定义的数据。在真实的开发过程中redux保存的数据需要我们从求服务器异步请求获取。那么我们该如何将网络请求的数据存储到redux中呢？

传统方法

传统的做法通常是在生命周期方法中进行网络请求，如下图所示（出自coderwhy）:

我们在componentDidMount()中进行网络请求然后将得到的数据通过dispatch action将数据放入redux.如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rKXTL1eC-1654954001064)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4c94ab3fbdf43a993ee85ef50fd8175~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

中间件

在上述代码中我们将网络请求放在组件的生命周期当中进行处理，事实上网络请求也属于state管理的一部分。更好的做法是我们将它放到redux中进行处理，那么我们如何在redux中进行异步操作呢？中间件会帮我们处理它。

redux-thunk

默认情况下dispatch(action)中action需要我们传入一个对象，但是redux-thunk的引入使得我们可以将函数传入dispatch()。

1. 首先我们安装redux-thunk：yarn add redux-thunk
2. 然后引入React的applyMiddleware，通过字面意思我们也明白它是用来结合多个Middleware中间件，他会返回一个enhancer;

import {applyMiddleware} from 'redux';
import ThunkMiddleware from 'redux-thunk';
const enhancer = applyMiddleware(ThunkMiddleware) 

然后我们在createStore()函数中传入enhancer，这样我们就完成了thunk中间件的引入。

那么我们就可以试着在dispatch中传入一个函数，在使用getHomeMulidataAction()的时候会传入dispatch、getState两个参数，其中dispathc用于进行派发操作如demo中的为banners、recommends数组赋值。getState就是store的getState在网络请求中如果你需要用到原来redux中的数据可以进行使用。

redux-saga

redux-saga是另一个比较常用的中间件，它的使用比较灵活但是它的上手难度也是更大。

1. 首先我们安装redux-saga：yarn add redux-saga
2. 然后我们通过创建中间件的函数，创建中间件，并且放到applyMiddleware函数中；启动中间件的监听过程，并且传入要监听的saga；

其中composeEnhancers主要是用来使用redux-devtools工具，以此对项目的state进行监听和跟踪。

我们在项目中新建saga.ja文件，相关解释可以查看代码注释：

这样关于Redux的部分就整理完了，这些只是最基础的使用，进阶的或者更详细的讲解可以自行学习，最后我还是推荐coderWhy的课程，不是广告真心推荐。