第六章redux
6.1. redux理解
6.1.1. 学习文档
- 英文文档: Redux - A predictable state container for JavaScript apps. | Redux
- 中文文档: Redux中文文档
- Github: GitHub - reduxjs/redux: Predictable state container for JavaScript apps
6.1.2. redux是什么
- redux是一个专门用于做状态管理的JS库(不是react插件库)。
- 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
- 作用: 集中式管理react应用中多个组件共享的状态。
6.1.3. 什么情况下需要使用redux
- 某个组件的状态,需要让其他组件可以随时拿到(共享)。
- 一个组件需要改变另一个组件的状态(通信)。
- 总体原则:能不用就不用, 如果不用比较吃力才考虑使用。
6.1.4. redux工作流程
6.2. redux的三个核心概念
6.2.1. action
- 动作的对象
- 包含2个属性
- type:标识属性, 值为字符串, 唯一, 必要属性
- data:数据属性, 值类型任意, 可选属性
- 例子:{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }
7.2.2. reducer
- 用于初始化状态、加工状态。
- 加工时,根据旧的state和action, 产生新的state的纯函数。
7.2.3. store
- 将state、action、reducer联系在一起的对象
- 如何得到此对象?
- import {createStore} from 'redux'
- const store = createStore(reducer)
- import reducer from './reducers'
- import {createStore} from 'redux'
- 此对象的功能?
- getState(): 得到state
- subscribe(listener): 注册监听, 当产生了新的state时, 自动调用
- dispatch(action): 分发action, 触发reducer调用, 产生新的state
- getState(): 得到state
6.3. redux的核心API
6.3.1. createstore()
作用:创建包含指定reducer的store对象
6.3.2. store对象
- 作用: redux库最核心的管理对象
- 它内部维护着:
- state
- reducer
- 核心方法:
- getState()
- dispatch(action)
- subscribe(listener)
- 具体编码:
- store.getState()
- store.dispatch({type:'INCREMENT', number})
- store.subscribe(render)
6.3.3. applyMiddleware()
作用:应用上基于redux的中间件(插件库)
6.3.4. combineReducers()
作用:合并多个reducer函数
6.4. redux异步编程
6.4.1理解:
- redux默认是不能进行异步处理的,
- 某些时候应用中需要在redux中执行异步任务(ajax, 定时器)
6.4.2. 使用异步中间件
npm install --save redux-thunk
6.5. react-redux
6.5.1. 理解
- 一个react插件库
- 专门用来简化react应用中使用redux
6.5.2. react-Redux将所有组件分成两大类
- UI组件
- 只负责 UI 的呈现,不带有任何业务逻辑
- 通过props接收数据(一般数据和函数)
- 不使用任何 Redux 的 API
- 一般保存在components文件夹下
- 只负责 UI 的呈现,不带有任何业务逻辑
- 容器组件
- 负责管理数据和业务逻辑,不负责UI的呈现
- 使用 Redux 的 API
- 一般保存在containers文件夹下
- 负责管理数据和业务逻辑,不负责UI的呈现
6.5.3. 相关API
- Provider:让所有组件都可以得到state数据
<Provider store={store}>
<App />
</Provider>
- connect:用于包装 UI 组件生成容器组件
import { connect } from 'react-redux'
connect(
mapStateToprops,
mapDispatchToProps
)(Counter)
- mapStateToprops:将外部的数据(即state对象)转换为UI组件的标签属性
const mapStateToprops = function (state) {
return {
value: state
}
}
- mapDispatchToProps:将分发action的函数转换为UI组件的标签属性
6.6. 使用上redux调试工具
6.6.1. 安装chrome浏览器插件
6.6.2. 下载工具依赖包
npm install --save-dev redux-devtools-extension
6.7. 纯函数和高阶函数
6.7.1. 纯函数
- 一类特别的函数: 只要是同样的输入(实参),必定得到同样的输出(返回)
- 必须遵守以下一些约束
-
- 不得改写参数数据
- 不会产生任何副作用,例如网络请求,输入和输出设备
- 不能调用Date.now()或者Math.random()等不纯的方法
-
- redux的reducer函数必须是一个纯函数
6.7.2. 高阶函数
1.理解: 一类特别的函数
- 情况1: 参数是函数
- 情况2: 返回是函数
2.常见的高阶函数:
- 定时器设置函数
- 数组的forEach()/map()/filter()/reduce()/find()/bind()
- promise
- react-redux中的connect函数
3.作用: 能实现更加动态, 更加可扩展的功能