Redux—redux-thunk— action里处理异步，封装详细步骤，适合初学者。

谁借莪１个温暖的怀抱￠ 2022-12-19 00:50 259阅读 0赞

#### 初学redux确实觉得很绕，因为封装的文件夹多容易乱。下面时我整理的步骤。 ####

#### 本文码云地址：https://gitee.com/guo–dong/redux.git ####

#### 异步请求为第10条 ####

#### 本文store代表redux实例 ####

#### 本文用到的插件有： ####

###### 1、`npm install --save redux` ######

`redux`用来集中的管理react中多个组件的状态

###### 2、`npm install redux-thunk --save` ######

使用thunk后，如果return的是一个函数就会自动接收一个dispatch方法

###### 3、`npm install --save axios` ######

`axios`用来发送异步请求

###### 4、`npm install --save react-redux` ######

4.1、使用`react-redux`：中的connect进行多个组件中的数据合并  
4.2、使用`Provider`：Provider 其实就只是一个外层容器，它的作用就是通过配合 connect 来达到跨层级传递数据。使用时只需将Provider定义为整个项目最外层的组件，并设置好store。那么整个项目都可以直接获取这个store。它的原理其实是通过React中的Context来实现的。它大致的核心

#### 文件目录 ####

标红的时重点用到的文件，store文件就代表redux  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]

# 开始使用 #

## 1、下载 ##

`npm install --save redux`

#### 2、创建store文件夹 ####

**在src目录下创建store文件夹并在此文件夹下创建一下文件：**  
2.1、index.js  
用来存放store实例  
2.2、HomeReducer.js  
用来存放Home页面的数据  
3.3、reducer.js  
用来合并数据  
4.4、actionCreate.js  
用来封装任务  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]

#### 3、创建store实例并引入reducer ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]

#### 4、HomeReducer.js,就是专门为Home页面创建的数据，当然其他页面也可以进行访问。其中包含我们对数据的操作。 ####

Action 是把数据从应用传到 store 的有效载荷。`唯一改变 state 的方法就是触发 action`。一般来说你会通过 store.dispatch() 将 action 传到 store。  
action.js由在页面调用第6步的任务时返回，返回值决定了我们对数据的操作逻辑。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]

#### 5、reducer.js，引入`combineReducers`、引入HomeReducer.js中的数据 ####

5.1、`combineReducers`用来惊醒数据合并，因为我们现在值创建了一个页面的数据，后续还会多个页面也需要创建数据，合并也是为了集中管理，后期我们号调用，所以进行合并。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]

#### 6、对任务进行封装 ####

封装的话是因为，如果我们做起来来项目，会有很多任务，如果都写在组件里面不好查找，容易重复，封装在一个文件里面可以避免这些。用的时候在对应的页面引入就行。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]

#### 7、在页面调用store中的数据 ####

7.1、引入store实例  
7.2、引入reducer.js中合并的Home页面数据  
7.3、调用action  
7.4、将store中的数据赋值给state方便调用  
7.5、用store.subscribe监听store中数据是否由变化，如果由变化就更新数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]

#### 8、至此简单的封装完毕，如果还由多个页面需使用redux需要怎么做，其实跟上面的写法时一样的，接下来接着上详细步骤。 ####

**1、例如我们现在由一个Phone也许要用使用redux，那我我们就在store文件下创建一个PhoneReducer.js。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]  
**2、同样我们也需要对任务进行封装**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]  
**3、在reducer.js中引入PhoneReducer.js合并数据**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]  
**4、在页调用**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]

## 9、react-redux ##

如上面的页面那个页面要使用store中的数据都需要引入，比较麻烦，react-redux就帮助我们解决这个问题，只需配置一次，所有组件都可以访问到store实例,并且react-redux已经帮我们把subscribe封装过了过了，只要数据发生改变就会自动更新。

react-redux是redux 的作者封装的一个 react 专用的库，它`能够使你的react组件从redux store中读取数据`，并且向store分发action更新数据。react-redux和redux在项目中是配合使用的

**react-redux由两个重要的属性**  
`Provider`：Provider是一个组件，它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过contex获取store。  
`connect`：用来连接store实例与组件，使得组件可以拿到store中的数据。

### 9.1、下载 ###

`npm install --save react-redux`

### 9.2、使用 ###

在项目根目录中引的index.js中，引入react-redux中的Provider包裹根组件，引入store实例。  
注意不要忘记传递store，不然会报错  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]

### 9.2、在需要使用store中数据的页面使用connect连接store与组件 ###

connect在调用之后时一个高阶组件，connect中的aa为形参可以随便写，代表接收store中的数据。  
使用connect连接完毕组件与store之后，store中的数据就映射到组件的props上了，this.props就代表的时store实例，也就是redux  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]

##### 其他组件也需要连接store的话，方法和9.2的方法一样 #####

在phone页面调用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]  
此截图就时调用的修改操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 14]

## 10、action里处理异步—redux-thunk ##

需要安装中间件 redux-thunk ，redux-thunk可以增强dispatch的功能，让dispatch可以接收一个函数作为参数。

##### 10.1、下载 #####

`npm install redux-thunk --save`  
`npm install --save axios`

##### 10.2、引用 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 15]

### 10、请求异步数据 ###

注意：使用thunk后，如果return的是一个函数就会自动接收一个dispatch方法，axios请求结果获得后，再去走上面的reducer流程，将数据传递给action。  
然后再页面中正常调用他就行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 16]  
这样写代码看着有些冗余可以这样简化一下

### 10.3、在页面掉用store ###

下载：`npm install --save react-redux`  
![这样写看着代码冗余，也可以简化一下][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 17]  
此时测试的话，可以发现数据时更新了，但是视图没更新数据。此时需要在根目录index.js中建通store中的数据变化。

## 解决办法： ##

在根目录中监听store中用`store.subscribe()`数据是否发生变化,如果发生变化重新渲染页面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 18]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/fd9ff8e9a28c4def935644fd6ca6a477.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/56dfd48115304569940aff2a4a9bc201.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/3ed4f0d3d4954981ae5231ebff718dad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/fd61b3b3ab4e416ba5ffe5201caa7d8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/8c714b2274b14ecd95f59c5145ff7452.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201104225744693.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201104231605206.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20201104232323263.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20201104232502794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]: https://img-blog.csdnimg.cn/20201104232610783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]: https://img-blog.csdnimg.cn/20201104232644132.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]: https://img-blog.csdnimg.cn/20201105112919609.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]: https://img-blog.csdnimg.cn/2020110512052574.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]: https://img-blog.csdnimg.cn/20201105131254968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 14]: https://img-blog.csdnimg.cn/20201105131405903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 15]: https://img-blog.csdnimg.cn/20201105132609525.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 16]: https://img-blog.csdnimg.cn/20201105133638439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 17]: https://img-blog.csdnimg.cn/20201105134003345.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 18]: https://img-blog.csdnimg.cn/20201105170620374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA==,size_16,color_FFFFFF,t_70#pic_center