Redux—redux-thunk——combineReducers 小灰灰 2022-11-22 02:49 208阅读 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 ##### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5] 可以看一下控制台打印结果 ![在这里插入图片描述][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
还没有评论,来说两句吧...