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函数必须是一个纯函数

相关推荐
C_心欲无痕2 小时前
移动端 B 站弹幕功能实现
前端·javascript
菜鸟很沉2 小时前
Vue 3 组件双向绑定完全指南:update:modelValue 与 defineModel
前端·javascript·vue.js
C_心欲无痕2 小时前
使用 FNM (Fast Node Manager) 管理多个 Node.js 版本
前端·node.js
爬山算法2 小时前
Hibernate(44)Hibernate中的fetch join是什么?
前端·python·hibernate
橙序员小站2 小时前
解密前端包管理工具:npm、Yarn与pnpm的全面对比
前端·npm·node.js
m0_748254662 小时前
HTML DOM - 修改 HTML 内容的方法
前端·html
Jinuss2 小时前
React16与React17+的JSX转换差异
前端·react.js
爱吃香菜i2 小时前
数据连接开发设计文档
前端·javascript
冴羽2 小时前
现代 CSS 颜色使用指南
前端·javascript·css