| |
|
开发:
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有三个核心:
学习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可以获取
如果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项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 | -2025/1/11 17:57:57- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |