web前端培训redux的理解与应用

IT小尚
151 阅读2分钟

7.1. redux理解

7.1.1. 学习文档

  1. 英文文档: redux.js.org/

  2. 中文文档: www.redux.org.cn/

  3. Github: github.com/reactjs/red…

7.1.2. redux是什么

  1. redux是一个专门用于做状态管理的JS库(不是react插件库)。

  2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用_前端培训。

  3. 作用: 集中式管理react应用中多个组件共享的状态。

7.1.3. 什么情况下需要使用redux

  1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。

  2. 一个组件需要改变另一个组件的状态（通信）。

  3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

更多Java –大数据 – 前端 – UI/UE - Android - 人工智能资料下载，可访问百度：尚硅谷官网(www.atguigu.com)

7.1.4. redux工作流程

​编辑

 

7.2. redux的三个核心概念

7.2.1. action

  1. 动作的对象

  2. 包含2个属性

l type：标识属性, 值为字符串, 唯一, 必要属性

l data：数据属性, 值类型任意, 可选属性

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

7.2.2. reducer

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

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

7.2.3. store

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

  2. 如何得到此对象?

  1. import {createStore} from 'redux'

  2. import reducer from './reducers'

  3. const store = createStore(reducer)

  1. 此对象的功能?

  1. getState(): 得到state

  2. dispatch(action): 分发action, 触发reducer调用, 产生新的state

  3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

7.3. redux的核心API

7.3.1. createstore()

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

7.3.2. store对象

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

  2. 它内部维护着:

  1. state

  2. reducer

  1. 核心方法:

  1. getState()

  2. dispatch(action)

  3. subscribe(listener)

  1. 具体编码:

  1. store.getState()

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

  3. store.subscribe(render)

7.3.3. applyMiddleware()

作用：应用上基于redux的中间件(插件库)

7.3.4. combineReducers()

作用：合并多个reducer函数

7.4. redux异步编程

7.4.1理解：

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

  2. 某些时候应用中需要在redux中执行异步任务(ajax, 定时器)

7.4.2. 使用异步中间件

npm install --save redux-thunk

7.5. react-redux

7.5.1. 理解

  1. 一个react插件库

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

更多Java –大数据 – 前端 – UI/UE - Android - 人工智能资料下载，可访问百度：尚硅谷官网(www.atguigu.com)

7.5.2. react-Redux将所有组件分成两大类

  1. UI组件

  1. 只负责 UI 的呈现，不带有任何业务逻辑_前端视频

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

  3. 不使用任何 Redux 的 API

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

  1. 容器组件

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

  2. 使用 Redux 的 API

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

7.5.3. 相关API

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

<Provider store={store}>

  <App />

  1. connect：用于包装 UI 组件生成容器组件

import { connect } from 'react-redux'

  connect(

    mapStateToprops,

    mapDispatchToProps

  )(Counter)

  1. mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性

const mapStateToprops = function (state) {

  return {

    value: state

  }

}

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

7.6. 使用上redux调试工具

7.6.1. 安装chrome浏览器插件

​编辑

 

7.6.2. 下载工具依赖包

npm install --save-dev redux-devtools-extension

7.7. 纯函数和高阶函数

7.7.1. 纯函数

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

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

  1. 不得改写参数数据

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

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

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

更多Java –大数据 – 前端 – UI/UE - Android - 人工智能资料下载，可访问百度：尚硅谷官网(www.atguigu.com)

7.7.2. 高阶函数

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

  1. 情况1: 参数是函数

  2. 情况2: 返回是函数

  1. 常见的高阶函数:

  1. 定时器设置函数

  2. 数组的forEach()/map()/filter()/reduce()/find()/bind()

  3. promise

  4. react-redux中的connect函数

  1. 作用: 能实现更加动态, 更加可扩展的功能
avatar
文章
阅读
粉丝