React中使用redux

简介: React中使用redux

要将store注入到组件当中,必须用标签将组件包裹
  组件引入自"react-redux"核心包
import { Provider } from 'react-redux';
import store from './store/index';




2."react-redux"核心包为我们提供的钩子函数

①useSelector(state => {}) 用来抓取store中存储的state数据
1.其中形参state获取的是所有切片中的state集合
2.函数中通过返回 state.name (name为store中各切片的属性名),来提取各切片数据
3.此时,调用useSelector()函数会返回回调函数中的返回值,用一个变量接收该对象即可
const student = useSelector(state => state.student)
console.log(student.age);
②useDispatch()获取派发器对象,此钩子函数无需传参
import { useDispatch } from "react-redux";
const dispatch = useDispatch()
引入切片页面中暴露的action创建器(例如setName、setAge等),然后作为调用dispatch时的参数即可

import { setName,setAge } from "./store";
const nameHandler = () => {
dispatch(setName({name:'杨玉蝉'}))
}

相关文章
|
4月前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
131 0
|
16天前
|
存储 JavaScript 前端开发
react redux 实现原理
【8月更文挑战第29天】react redux 实现原理
16 4
|
14天前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
25 0
|
14天前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
27 0
|
24天前
|
存储 JavaScript 前端开发
"探索Redux的Vuex化:如何在React世界中享受Vue状态管理的优雅与强大"
【8月更文挑战第21天】在现代前端开发中,状态管理至关重要。Vuex作为Vue.js的状态管理库,通过集中式存储和严格规则确保状态变更的追踪。Redux则以其在React生态中的可预测性和灵活性著称。两者都强调单一数据源、状态只读及使用纯函数变更状态。尽管API设计不同,理解Redux的核心概念——单一数据源(`store`)、状态只读与纯函数变更(`reducers`),并参考Vuex的`state`、`mutations`等,能帮助开发者快速掌握Redux,高效管理应用状态。
14 0
|
25天前
|
JavaScript 前端开发 安全
|
2月前
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
174 0
|
4月前
|
存储 JavaScript 前端开发
基于React和Redux的待办事项列表应用
基于React和Redux的待办事项列表应用
51 0
|
4月前
|
JavaScript 前端开发 搜索推荐
构建一个基于React和Redux的简易电商购物车应用
构建一个基于React和Redux的简易电商购物车应用
53 0
|
4月前
|
JavaScript 前端开发
构建一个基于React和Redux的Todo应用
构建一个基于React和Redux的Todo应用
40 0