IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 初学React关于Redux的笔记 -> 正文阅读

[JavaScript知识库]初学React关于Redux的笔记

redux是一个专门用于做状态管理的js库,不是react插件。

作用:1.集中式管理react应用中多个组件共享的状态。2.某个组件的状态需要让其他组件可以随时拿到。3.一个组件需要改变另一个组件状态。

redux有三个核心:

1.action------动作对象,包含2个属性:

? ? ? ? ? ? ? ? type-----标识属性,值为字符串,唯一,必要属性

? ? ? ? ? ? ? ? data-----数据属性,值为任意类型,可选属性

2.reducer------用于初始化状态、加工状态。加工时,根据旧的state和action,产生新的state的纯函数。

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

学习redux,放进我的案例项目里使用,我想把页面登录的状态存放在redux里。

先安装redux:?npm i redux

创建redux文件,包含store.js和login_action.js和login_reducer.js

store.js引入redux中的createStore函数,创建一个store

?login_action.js专门用于创建action对象

?login_reducer.js接收preState,action,返回加工后的状态

我把action用到的type值放在constant.js中,方便统一管理 。

将我组件中原先的登录状态删除,在login.js和header.js里都引入react-redux的connect()()方法为UI组件包裹一个容器组件,在App.js里使用UI组件标签上传递store

这个容器组件是真正和redux打交道的,里面可以随意使用redux的API,UI组件中不能使用任何redux的API。

容器组件会传给UI组件:1.mapStateToProps函数传出redux中所保存的状态。2.mapDispatchToProps函数传出用于操作状态的方法。

在UI组件中使用this.props可以获取

this.props.login(true);? -------登录

this.props.logOut(false);? ---------退出

如果App.js里有多个子组件要使用redux,可以给<App/>包裹一个<Provider store={store}></Provider>即可。

如果有多个组件都要共享redux,需要为每个组件编写:reducer、action、配置constant常量,多个reducer要使用combineReducers进行合并,合并后的总状态是一个对象,交给store的是总reducer,最后在组件中取出状态。

使用了react-redux后也不用自己监测redux中状态的改变了,容器组件可以自动完成。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-11-05 00:19:49  更:2022-11-05 00:23:27 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/17 18:08:44-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码