Redux—redux-thunk——combineReducers

小灰灰 2022-11-22 02:49 156阅读 0赞

任何对数据的才做都会经理renducer，reducer要求是个纯函数（在函数内部不能修改函数的参数(输入)，要有返回值），它的功能是：传入旧的state，根据action对state做操作，返回新的state。

# redux是什么 #

Redux是为javascript应用程序提供一个`状态管理工具`,集中的管理react中多个组件的状态。  
redux是专门作状态管理的js库（`不是react插件库可以用在其他js框架中例如vue，但是基本用在react中`）

## 什么时候用redux ##

#### `需求场景：` ####

某个组件的状态需要共享的时候  
某个组件的状态需要在任何地方都可以拿到  
一个组件需要改变全局状态  
一个组件需要改变另一个组件的状态

## redux三大原则 ##

1、`单一数据源`:整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中  
2、`State 是只读的`:唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。  
3、`使用纯函数来执行修改`:为了描述 action 如何改变 state tree ，你需要编写 reducers(一些纯函数，它接收先前的 state 和 action，)

## redux常用概念 ##

1、`Store`：管理着整个应用的状态，`可以通过getState()来重新获得最新的状态(state)`。  
2、`Actio`n：`是唯一可以改变状态(state)的方式`，服务器的各种推送、用户自己做的一些操作，最终都会转换成一个个的Action，而且这些Action就是修改的动作，`可以通过dispatch()方法来进行调用`。  
3、`Reducer`：Reducer 是一个纯函数，它接收 Action 和当前 State 作为参数，返回一个新的 State。（`纯函数就是只要传入相同的参数，每次都应返回相同的结果`）。

## redux常用方法 ##

1、`createStore（）`作用：创建一个Redux store来存放应用中所有的state，一个应用只能有个store。函数返回store对象。  
2、`getState()`作用：获取数据  
3、`dispatch()`分发action，这是改变state的唯一方法。  
4、`subscribe()`添加一个变化监听器，每当改变store的时候就会执行

## **redux成员** ##

<table> 
 <thead> 
  <tr> 
   <th>成员</th> 
   <th>作用</th> 
   <th>类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>createStore(reducer,state)</td> 
   <td>创建store实例(state:仓库存放的数据；reducer：对数据的操作)</td> 
   <td>函数</td> 
  </tr> 
  <tr> 
   <td>combineReducers</td> 
   <td>合并多个reducer</td> 
   <td>函数</td> 
  </tr> 
  <tr> 
   <td>applyMiddleware</td> 
   <td>安装中间件，改装增强redux</td> 
   <td>函数</td> 
  </tr> 
 </tbody> 
</table>

## store成员 ##

<table> 
 <thead> 
  <tr> 
   <th>成员</th> 
   <th>作用</th> 
   <th>类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>subscribe(回调函数)</td> 
   <td>订阅state变化</td> 
   <td>函数</td> 
  </tr> 
  <tr> 
   <td>dispatch(action)</td> 
   <td>发送action 给 reducer</td> 
   <td>函数</td> 
  </tr> 
  <tr> 
   <td>getState()</td> 
   <td>获取一次state的值</td> 
   <td>函数</td> 
  </tr> 
  <tr> 
   <td>replaceReducer</td> 
   <td>一般在 Webpack Code-Splitting 按需加载的时候用</td> 
   <td>函数</td> 
  </tr> 
 </tbody> 
</table>

## 使用（小试牛刀） ##

##### 1、下载： #####

`cnpm install --save redux`

###### 2、创建store实例 ######

并引入state（数据），和reducer![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]

##### 3、创建state也就是数据 #####

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

##### 4、创建reducer #####

Action就是修改的动作，可以通过dispatch()方法来进行调用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]

##### 5、在页面调用redux中的数据并盗用修改操作，对数据进行修改。 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]  
现在点击按钮就可以对redux数据进行修该了。  
可以在reducer.js中打印action看看每次点击的你返回值是什么  
附上截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]  
点击+1，action.type返回ADD执行了+1操作  
点击-1，action.type返回DEL执行l-操作

##### 我们在调用action（也就是修改操作），也可以返回数据给action #####

![在这里插入图片描述][20201103160642469.png_pic_center]  
可以看到点击+1，action得到了payload:5;点击-1，action得到了payload:2

那么我们就可以在reducer中使用页面返回的数据，对数据进行修改，如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]

#### 如果state.js中有多条数据，看一下现在的写法 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]  
如果有多条数据，那我页面中，监听到数据变化后，多条数据都需要重更新。  
在一个就是reducer中需要这样写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]

### 提取action进行封装 ###

下面先将重新封的redux截图贴上  
1、index.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]  
2、state.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]  
3、reducer.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]  
4、盗用redux的页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]

### 接下来对action进行封装（是唯一可以改变状态) ###

也就是对下图标红的地方进行封装，封装的意义就是，如果不封装，那么人物是在各个组件里面的，不易查找，容易重复，封装在一起解决这些问题。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]

###### 新建一个文件夹actionCreate.js,在其中对人物进行封装 ######

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

###### 封装完成之后再页面调用。 ######

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

###### 如果需要传递参数的话，一形参的方式传递给封装的人物，然后在，reducer.js中接收即可。 ######

**1、传递数据给action**  
![在这里插入图片描述][20201104154135689.png_pic_center]  
**2、在人物中接收**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 16]  
**3、使用数据**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 17]

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

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

注：使用thunk后，actionCreate.js的action可以是个函数，如果return的是一个函数就会自动接收一个dispatch方法，axios请求结果获得后，再去走上面的reducer流程，代码如下：

###### applyMiddleware： ######

安装中间件，改装增强redux  
**1、安装：npm install redux-thunk --save  
引入使用**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 18]  
使用thunk后，如果return的是一个函数就会自动接收一个dispatch方法，axios请求结果获得后，再去走上面的reducer流程，代码如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 19]

## combineReducers（合并多个reducer） ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/0efa9c96eb3f45e5b03d591946712e4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/d0c9fbc6ab9e488199f5b241f6cc86d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/1df930922173474581abad8e25ba36e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/340c15e29f1342f8970120e3db4d1676.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/8059bd1b4f354d2a9b573b0df6850f45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/62d15f82e39544818420c804b78ec415.png
[20201103160642469.png_pic_center]: /images/20221120/9ed4b9cb308f48ce9a8a1777258d0f86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/3d868bd51be2421da2346bb17626e850.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/5a2272f5843449238d5284a986d07466.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221120/f3f040491f1d4d3cadf3775f08fd5514.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221120/fd286f23b7a048bf90a18ad1ee20fce3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221120/d79f3364d1f547c9821cd66b6abe720e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221120/7f5455a32e084527a14c9635c16db4fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221120/dfc248393b9b4659bed11e145d6a879f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221120/3628a8626ec342e5b6244f67aaa1e6d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221120/74fee103537648848033aee903e4b8b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221120/f800321b40b84336bcfe39abccd548fc.png
[20201104154135689.png_pic_center]: /images/20221120/6534ca2127a146e1948860d869a499b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221120/9f9102d7904b41898f024e254d447788.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20221120/ed1b34b27d274b8996e43b80684b293a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 18]: /images/20221120/19ada87f95e54af3aed474e9b90f64da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 19]: /images/20221120/2d134c950ee947f5824c588805ca4f4c.png

Redux—redux-thunk——combineReducers

发表评论取消回复

还没有评论，来说两句吧...

相关阅读