React学习总结-----第六章(完结)

第六章 React redux

6.1 redux理解

6.1.1 学习文档

1. 英文文档：https://redux.js.org/
2. 中文文档：http://www.redux.org.cn/
3. Github：https://github.com/reactjs/redux

6.1.2 redux是什么

1. redux是一个专门用于做状态管理的JS库（不是react插件库）
2. 它可以用在react、angular、vue等项目中，但基本与react配合使用
3. 作用：集中式管理react应用中多个组件共享的状态

6.1.3 什么情况下需要使用redux

1. 某个组件的状态，需要让其他组件可以随时拿到（共享）
2. 一个组件需要改变另一个组件的状态（通信）
3. 总体原则：能不用就不用，如果不用比较吃力才考虑使用

6.1.4 redux工作流程

6.2 redux的三个核心概念

6.2.1 action

        1. 动作的对象

        2. 包含两个属性

                1> type：标识属性，值为字符串，唯一，必要属性

                2> data：数据属性，值类型任意，可选属性

        3. 例子：{ type:'ADD_STUDENT',data : { name:'tom',age:18 } }

6.2.2 reducer

        1. 用于初始状态、加工状态

        2. 加工时，根据旧的state和action，产生新的state的纯函数

6.2.3 store

        1. 将store、action、reducer联系在一起的对象

        2. 如何得到此对象

                1> import {createStore} from 'redux'

                2> import reducer from './reducers'

                3> const store = createStore(reducer)

        3. 此对象的功能？

                1> getState()：得到state

                2> dispatch(action)：分发action，触发reducer调用，产生新的state

                3> subscribe(listener)：注册监听，当产生了新的state时自动调用

6.3 redux的核心API

6.3.1 createStore()

        作用：创建包含指定的reducer的store对象

6.3.2 store对象

        1. 作用：redux库最核心的管理对象

        2. 它内部维护着：

                1> state

                2> reducer

        3. 核心方法：

                1> getState()

                2> dispatch(action)

                3>subscribe(listener)

        4. 具体编码

                1> store.getState()

                2> store.dispatch({type:'INCREMENT',number})

                3> store.subscribe(render)

6.3.3 applyMiddleware()

        作用：应用上基于redux的中间件

6.3.4 combineReducers()

        作用：合并多个reducer函数

6.4 redux异步编程

6.4.1 理解：

        1.redux默认是不能进行异步处理的

        2. 某些时候应用中需要在redux中执行异步任务（ajax，定时器）

6.4.2 使用异步中间件

        npm i --save redux-thunk

6.5 react-redux

6.5.1 理解

        1. 一个react插件库

        2.专门用来简化react应用中使用redux

6.5.2 reacr-redux将所有组件分成两大类

        1. UI组件

                1> 只负责UI的呈现，不带有任何业务逻辑

                2> 通过props接收数据(一般数据和函数)

                3> 不使用任何Redux的API

                4> 一般保存在components文件夹下

        2. 容器组件

                1> 负责管理数据和业务逻辑，不负责UI的呈现

                2> 使用Redux的API

                3> 一般保存在containers文件夹下

6.5.3 相关API

        1. Provider：让所有组件都可以得到state数据

        2. connect：用于包装UI组件生产容器组件

        3. mapStateTopProps：将外部的数据(即state对象)转换为UI组件的标签属性

        4.mapDispatchTopProps：将分发action的函数转换为UI组件的标签属性

6.6 使用上redux调试工具

6.6.1 安装chrome浏览器插件

6.6.2 下载工具依赖包

        npm i --save-dev redux-devtools-estention

6.7 纯函数和高阶函数

6.7.1 纯函数

        1. 一类特别的函数：只要是同样的输入（实参），必定得到同样的输出（返回）

        2. 必须遵守以下一些约束：

                1> 不得改写参数数据

                2> 不会产生任何副作用，例如网络请求，输入和输出设备

                3> 不能调用Date.now()或者Math.random()等不纯的方法

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

6.7.2 高阶函数

        1. 理解：一类特别的函数

                1> 情况1：参数是函数

                2> 情况2：返回是参数

        2. 常见的高阶函数：

                1> 定时器设置函数

                2> 数组的forEach()/map()/filter()/reduce()/bind()等

                3> promise

                4> react-redux中的connect函数

        3. 作用：能实现更加动态，更加可扩展的功能