React中使用redux

简介: 【10月更文挑战第15天】
  1. 要将store注入到组件当中,必须用标签将组件包裹
      组件引入自"react-redux"核心包

    import {
          Provider } from 'react-redux';
    import store from './store/index';
    
    <Provider store={
         store}>
     <App />
    </Provider>
    
  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:'杨玉蝉'}))
  }
目录
相关文章
|
3月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
71 1
|
4月前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
70 0
|
4月前
|
前端开发 JavaScript
深入理解前端状态管理:React、Redux 和 MobX
【10月更文挑战第7天】深入理解前端状态管理:React、Redux 和 MobX
125 0
|
4月前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
4月前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
|
4月前
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
|
4月前
|
存储 JavaScript 前端开发
如何在 React Hooks 中使用 Redux?
【10月更文挑战第1天】
|
4月前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
78 1
|
6月前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
54 0
|
6月前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
63 0