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:'杨玉蝉'}))
}

相关文章
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
200 0
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
378 95
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
197 2
|
存储 JavaScript 前端开发
React中使用redux
【10月更文挑战第15天】
104 3
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
|
存储 JavaScript 前端开发
如何在 React Hooks 中使用 Redux?
【10月更文挑战第1天】
|
存储 JavaScript 前端开发
react redux 实现原理
【8月更文挑战第29天】react redux 实现原理
182 4
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
319 0