Redux介绍(二)

Redux介绍(二)

一、react-redux

1、所有的UI组件都应该包裹一个容器组件,它们是父子关系

2、容器组件是真正和redux打交道的,里面可以随意使用redux中API

3、UI组件中不能使用任何redux中API

4、容器组件回传给UI组件参数: redux中国所保存的状态;用于操作状态的方法

5、备注: 容器给UI传递状态,操作状态的方法,均通过props传递

二、求和案例(react-redux版本)

1、明确两个概念

复制代码
1.1 UI组件,不能使用任何redux的API,只负责页面的呈现、交互等
1.2 容器组件,负责和redux通信,将结果交给UI组件

2、创建一个容器组件,靠react-redux的connect函数

javascript 复制代码
// mapStateToProps: 映射状态,返回值是一个对象
// mapDispatchToProps: 映射操作状态的方法,返回值是一个对象
connect(mapStateToProps, mapDispatchToProps)(UI组件)

3、备注: 容器组件中的store是靠props传递,而不是在容器组件中直接引入

4、mapDispatchToProps可以是一个对象

三、纯函数概念

1、一类特别的函数: 只要是同样的输入实参,必定得到同样的输出

2、必须要遵守以下约束: 不得改写参数数据;不会产生任何副作用,例如网络请求、输入和输出设备;不能调用Date.now/Math.random等不纯的方法

3、redux的reducer函数必须是一个纯函数

相关推荐
NGBQ121386 分钟前
Adobe-Premiere-Pro-2026-26.0.2.2-m0nkrus 全解析:专业视频编辑软件深度指南
前端·adobe·音视频
北城笑笑8 分钟前
Chrome:Paused in debugger 的踩坑实录:问题排查全过程与终极解决方案( 在调试器中暂停 )
前端·chrome
haorooms10 分钟前
Promise.try () 完全指南
前端·javascript
kyriewen11 分钟前
闭包:那个“赖着不走”的家伙,到底有什么用?
前端·javascript·ecmascript 6
斌味代码14 分钟前
el-popover跳转页面不隐藏,el-popover销毁
前端·javascript·vue.js
该怎么办呢14 分钟前
cesium核心代码学习-01项目目录及其基本作用
前端·3d·源码·webgl·cesium·webgis
踩着两条虫21 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(十九):CLI与工具链之Create VTJ CLI 参考
前端·ai编程·vite
天下无贼!32 分钟前
【Python】2026版——FastAPI 框架快速搭建后端服务
开发语言·前端·后端·python·aigc·fastapi
GISer_Jing1 小时前
两种AI交互方式深度解析——浏览器书签&插件
前端·人工智能·ai·prompt