react-redux useSelector钩子 学习样例 + 详细解析

（一）react-redux useSelector 学习样例 + 详细解析 

创建一个新项目，将依赖正确安装：

npx create-react-app my-redux-app
cd my-redux-app# 安装 Redux 和 React-Redux
npm install redux react-redux# 安装 ajv
npm install ajv# 安装最新的 react-scripts
npm install react-scripts@latestnpm install antd
my-redux-app/
├── public/
│   └── index.html
├── src/
│   ├── actions/
│   │   └── index.js
│   ├── components/
│   │   └── GiftSelector.js
│   ├── reducers/
│   │   └── index.js
│   ├── store/
│   │   └── index.js
│   ├── App.js
│   └── index.js
└── package.json

package.json 

{"name": "my-redux-app","version": "1.0.0","main": "index.js","license": "MIT","dependencies": {"react": "^17.0.2","react-dom": "^17.0.2","react-redux": "^7.2.4","redux": "^4.1.0"},"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"}
}

 

 1.src/actions/index.js

export const SET_GIFT_ITEMS = 'SET_GIFT_ITEMS';export const setGiftItems = (giftItems) => ({type: SET_GIFT_ITEMS,payload: giftItems,
});

2.src/reducers/index.js

import { combineReducers } from 'redux';
import { SET_GIFT_ITEMS } from '../actions';const initialSettingInfo = {giftOptionIndex: 0,giftItems: [],
};const settingInfo = (state = initialSettingInfo, action) => {switch (action.type) {case SET_GIFT_ITEMS:return {...state,giftItems: action.payload,};default:return state;}
};const rootReducer = combineReducers({settingInfo,
});export default rootReducer;

3.src/store/index.js

import { createStore } from 'redux';
import rootReducer from '../reducers';const store = createStore(rootReducer);export default store;

4.src/components/GiftSelector.js

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Select, Button } from 'antd';
import { setGiftItems } from '../actions';const { Option } = Select;const giftList = [{ giftId: 1, giftName: '礼物1' },{ giftId: 2, giftName: '礼物2' },{ giftId: 3, giftName: '礼物3' },
];const GiftSelector = () => {const [selectedGiftId, setSelectedGiftId] = useState(null);const dispatch = useDispatch();const giftItems = useSelector((state) => state.settingInfo.giftItems);const handleChange = (value) => {setSelectedGiftId(value);};const handleAddGift = () => {if (selectedGiftId) {const selectedGift = giftList.find((gift) => gift.giftId === selectedGiftId);const newGiftItems = [...giftItems, selectedGift];dispatch(setGiftItems(newGiftItems));}};return (<div><Select style={{ width: 200 }} onChange={handleChange} placeholder="选择一个礼物">{giftList.map((gift) => (<Option key={gift.giftId} value={gift.giftId}>{gift.giftName}</Option>))}</Select><Button type="primary" onClick={handleAddGift} style={{ marginLeft: 10 }}>添加</Button><div><h3>已添加的礼物：</h3>{giftItems.map((gift) => (<div key={gift.giftId}>{gift.giftName}</div>))}</div></div>);
};export default GiftSelector;

5.src/App.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import GiftSelector from './components/GiftSelector';
import 'antd/dist/antd.css';const App = () => {return (<Provider store={store}><GiftSelector /></Provider>);
};export default App;

6.src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

运行项目

npm start

功能描述

  1. GiftSelector 组件：

    • 使用 Select 组件展示礼物列表。
    • 使用 Button 组件添加选中的礼物。
    • 添加的礼物展示在下方。

  2. 状态管理：

    • 使用 Redux 管理 giftItems 状态。
    • 动作 setGiftItems 用于更新 giftItems。

这个项目展示了如何使用 antd 组件结合 Redux 来实现礼物选择和添加功能。

 

>>>>作用

（1）获取 Redux 状态：

  • useSelector 是 React-Redux 库中的一个钩子函数，用于从 Redux 状态树中提取数据。

（2）通过 Selector 提取特定状态：

  • useSelector 接受一个回调函数，该回调函数会被调用并传递 Redux 状态树作为参数。
  • 在这个回调函数中，你可以从状态树中选择你需要的部分状态。

（3）具体实现：

  • (state) => state.settingInfo.giftItems 是传递给 useSelector 的回调函数。
  • state 参数代表整个 Redux 状态树。
  • state.settingInfo 获取 settingInfo 这个 reducer 管理的状态部分。
  • state.settingInfo.giftItems 获取 settingInfo 中的 giftItems 数组。

（4）结果：

  • 返回的 giftItems 就是 settingInfo 中的 giftItems 数组，即当前已经添加的礼物列表。
  • 当 settingInfo.giftItems 发生变化时，React 组件会重新渲染以反映最新状态。

让我们详细说明一下数据更新的流程。以我们的 GiftSelector 示例为例，具体流程包括以下步骤：

1. 初始状态

在 Redux 中，giftItems 的初始状态为空数组。

const initialState = {giftOptionIndex: 0,giftItems: [],
};

2. 用户选择礼物并点击添加按钮

用户通过 Ant Design Select 组件选择一个礼物，并点击 "添加" 按钮触发操作。

3. 触发 Redux Action

点击 "添加" 按钮时，触发 handleAddGift 函数，这会分发一个 setGiftItems action 来更新状态。

const handleAddGift = () => {if (selectedGiftId) {const selectedGift = giftList.find((gift) => gift.giftId === selectedGiftId);const newGiftItems = [...giftItems, selectedGift];dispatch(setGiftItems(newGiftItems));}
};

4. Action 创建器

setGiftItems action 创建器返回一个 action 对象。

// src/actions/index.js
export const SET_GIFT_ITEMS = 'SET_GIFT_ITEMS';export const setGiftItems = (giftItems) => ({type: SET_GIFT_ITEMS,payload: giftItems,
});

5. Redux Reducer 处理 Action

Redux store 接收到 SET_GIFT_ITEMS action 后，reducer 处理这个 action 并返回更新的状态。

// src/reducers/index.js
const initialSettingInfo = {giftOptionIndex: 0,giftItems: [],
};const settingInfo = (state = initialSettingInfo, action) => {switch (action.type) {case SET_GIFT_ITEMS:return {...state,giftItems: action.payload,};default:return state;}
};

6. Store 更新状态

Redux store 根据 reducer 的返回值更新 settingInfo.giftItems 状态。

7. React 组件重新渲染

由于 useSelector 钩子将 giftItems 状态映射到组件中，当 Redux 状态更新时，组件会自动重新渲染以反映最新的状态。

const giftItems = useSelector((state) => state.settingInfo.giftItems);

示例流程

让我们具体展示一次用户操作和状态更新的流程：

（1）初始状态：

{giftOptionIndex: 0,giftItems: [],
}

（2）用户选择礼物：

  • 用户选择 giftId: 1 的礼物（礼物1）。
  • selectedGiftId 更新为 1。

（3）点击 "添加" 按钮：

  • 调用 handleAddGift 函数。

  • newGiftItems 计算为 [{ giftId: 1, giftName: '礼物1' }]。

  • 分发 setGiftItems(newGiftItems)：

（4）Reducer 处理 Action：

  • 接收到 SET_GIFT_ITEMS action。

  • 返回更新后的状态：

{giftOptionIndex: 0,giftItems: [{ giftId: 1, giftName: '礼物1' }],
}

（5）组件重新渲染：

  • GiftSelector 组件由于 giftItems 状态更新而重新渲染。

  • 新状态 giftItems 映射到组件，UI 显示已添加的礼物：

<div key={gift.giftId}>{gift.giftName}</div>

这就是完整的数据更新流程：

  • 用户操作触发事件，事件分发 action，reducer 处理 action 并返回新状态，store 更新状态，React 组件重新渲染以反映新状态。

总结

  1. 用户选择礼物。
  2. 点击按钮分发 action。
  3. Reducer 接收 action 并更新状态。
  4. Redux store 更新状态。
  5. useSelector 获取最新状态，组件重新渲染 UI。

（二）useSelector

useSelector 是 React-Redux 提供的一个钩子，用于从 Redux 的状态树中提取部分数据。

基本概念

useSelector 的主要作用是：

  1. 从 Redux 状态树中选择（或提取）数据。
  2. 在选中的数据发生变化时自动重新渲染组件。

例子和解释

假设我们在 Redux 状态中存储了一些礼物信息，并且希望在组件中获取和显示这些礼物信息。

Redux 状态结构

首先，假设我们的 Redux 状态结构如下：

const initialState = {settingInfo: {giftOptionIndex: 0,giftItems: [], // 这里存放礼物数组},
};

 使用 useSelector 钩子从 Redux 状态中获取数据

在组件中，我们使用 useSelector 钩子从 Redux 状态中提取 giftItems 数据：

import React from 'react';
import { useSelector } from 'react-redux';const GiftList = () => {// 使用 useSelector 提取 giftItemsconst giftItems = useSelector((state) => state.settingInfo.giftItems);return (<div><h3>已添加的礼物：</h3>{giftItems.map((gift) => (<div key={gift.giftId}>{gift.giftName}</div>))}</div>);
};export default GiftList;

详细步骤

  • 引入 useSelector： 首先确保从 react-redux 引入了 useSelector：
import { useSelector } from 'react-redux';
  • 定义 Selector 回调函数：

useSelector 接受一个回调函数，这个回调函数有一个参数 state，代表整个 Redux 状态树。

const giftItems = useSelector((state) => state.settingInfo.giftItems);

上面的代码意思是：

  • 从 Redux 状态树中选择 state.settingInfo.giftItems 这个部分。
  • giftItems 会得到 state.settingInfo.giftItems 的值。

输出提取的数据： 在 JSX 中，可以使用 giftItems 来输出数据，例如：

{giftItems.map((gift) => (<div key={gift.giftId}>{gift.giftName}</div>
))}

工作原理

  1. 获取当前状态： useSelector 从 Redux store 中获取当前状态（或数据）。

  2. 订阅状态变化： 当所选择的状态部分发生变化时，useSelector 会让组件重新渲染，以反映最新状态。

  3. 返回选中的状态： giftItems 存储了最新的被选中的状态部分的数据。

在这个完整的例子中，useSelector 钩子用于从 Redux 状态树中提取 settingInfo.giftItems。当 giftItems 发生变化时，组件会自动重新渲染并显示最新的礼物列表。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/16219.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

小地图制作（一）

小地图制作（一）

（1）素材准备 （2）小地图的显示
阅读更多...
中国书法、孙溟㠭浅析“象形印”

中国书法、孙溟㠭浅析“象形印”

孙溟㠭浅析“象形印” “象形印”又称之为“图案印”、“肖像印”。刻有图案印章的统称。 图画印自战国、汉、魏都有&#xff0c;象形印一般铸有人物、动物等图案&#xff0c;如&#xff1a;龙、虎、雀、凤、龟等都是吉祥的图案&#xff0c;有白文&#xff0c;也有朱文。取材…
阅读更多...
腾讯云双11最强攻略：如何选购优惠产品，薅最划算的羊毛

腾讯云双11最强攻略：如何选购优惠产品，薅最划算的羊毛

目录 一、首选优惠产品 二、可参与拼团的产品&#xff1a;超值组合优惠 三、不推荐购买的产品 四、注意事项与优惠最大化技巧 总结 腾讯云的双11活动力度空前&#xff0c;适合个人开发者、中小企业甚至是大型公司。这份攻略将帮你了解该购买哪些产品&#xff0c;不该购买哪…
阅读更多...
外网访问 WebDav 服务

外网访问 WebDav 服务

从外部网络环境&#xff08;比如异地和家中网络&#xff09;来访问公司内网的 WebDav 服务&#xff08;基于 IIS &#xff09;并映射成本地虚拟磁盘。 步骤如下 第一步 在公司内网的电脑上设置 webDav。 1&#xff0c;找到【控制面板】&#xff0c;双击进入。 2&#xff0c…
阅读更多...
基于卷积神经网络的草莓叶片病虫害识别与防治系统，vgg16，resnet，swintransformer，模型融合（pytorch框架，python代码）

基于卷积神经网络的草莓叶片病虫害识别与防治系统，vgg16，resnet，swintransformer，模型融合（pytorch框架，python代码）

更多图像分类、图像识别、目标检测等项目可从主页查看 功能演示&#xff1a; 草莓叶片病虫害识别与防治系统&#xff0c;vgg16&#xff0c;resnet&#xff0c;swintransformer&#xff0c;模型融合&#xff0c;卷积神经网络&#xff08;pytorch框架&#xff0c;python代码&…
阅读更多...
【喜报】恭喜青创智通成功签约深圳信维通信SunFMEA软件项目！

【喜报】恭喜青创智通成功签约深圳信维通信SunFMEA软件项目！

阅读更多...
双十一抢券风波：大学生300元提6000元电动车遭拒，谁该负责？

双十一抢券风波：大学生300元提6000元电动车遭拒，谁该负责？

双十一购物狂欢节&#xff0c;本应是消费者享受优惠、商家提升销量的双赢时刻&#xff0c;但在河南郑州&#xff0c;发生了一起哭笑不得的抢券风波。一名大学生在双十一期间&#xff0c;通过某平台抢到了原价6099元电动车的直降优惠&#xff0c;只需支付300元就能将车骑回家。然…
阅读更多...
(a,b,0)类的计数分布

(a,b,0)类的计数分布

内容来源 保险风险与破产&#xff08;原书第二版&#xff09;科学出版社 定义 如果一个计数分布的分布律满足 p n ( a b n ) p n − 1 , n 1 , 2 , ⋯ p_n\left(a\frac{b}{n}\right)p_{n-1},n1,2,\cdots pn​(anb​)pn−1​,n1,2,⋯ 其中 a , b a,b a,b 均为常数&#x…
阅读更多...
菜叶子芯酸笔记4：大模型训练、分布式训练、显存估算

菜叶子芯酸笔记4：大模型训练、分布式训练、显存估算

大模型训练任务主要分为以下三种模型训练过程。 预训练pretrain 监督微调 supervised finetune training 奖励模型 reward model RLHF 它们之间的顺序联系用RLHF (reinforcement learning with human feedback) 过程来阐释。 首先预训练pretrain得到一个base模型。 到微调…
阅读更多...
Python爬虫----python爬虫基础

Python爬虫----python爬虫基础

一、python爬虫基础-爬虫简介 1、现实生活中实际爬虫有哪些&#xff1f; 2、什么是网络爬虫&#xff1f; 3、什么是通用爬虫和聚焦爬虫&#xff1f; 4、为什么要用python写爬虫程序 5、环境和工具 二、python爬虫基础-http协议和chrome抓包工具 1、什么是http和https协议…
阅读更多...
什么是低温温度传感器

什么是低温温度传感器

低温学是物理学的一个分支&#xff0c;处理极低温度的产生和影响。已经基于各种与温度相关的特性开发了低温温度传感器。常见的市售传感器包括电阻器&#xff0c;电容器&#xff0c;热电偶和诸如二极管或晶体管的半导体结器件。 主要标准级传感器对热和机械冲击非常敏感&#…
阅读更多...
【SpringBoot】23 文件预览（kkFileView）

【SpringBoot】23 文件预览（kkFileView）

Gitee仓库 https://gitee.com/Lin_DH/system 介绍 文件预览功能是指在不打开或编辑文件的情况下&#xff0c;通过某种方式查看文件的内容、格式或者部分内容的功能。该功能通常用于文件管理系统、办公工具、在线教育平台、企业协作平台、电子邮件客户端等领域&#xff0c;能…
阅读更多...
PC提取微信语音

PC提取微信语音

首先&#xff0c;多选需要转存的语音信息——点击下方正方体图标收藏——打开收藏界面&#xff0c;找到语音文件打开——点击界面上放3个小点&#xff0c;选择转存为笔记。 然后&#xff0c;打开电脑端微信&#xff0c;点击左侧收藏图标&#xff0c;找到保存的语音文件打开&am…
阅读更多...
STM32 ADC --- 单通道采样

STM32 ADC --- 单通道采样

STM32 ADC — 单通道采样 文章目录 STM32 ADC --- 单通道采样cubeMX配置代码修改&#xff1a;应用 使用cubeMX生成HAL工程 需求&#xff1a;有多个通道需要进行ADC采样&#xff0c;实现每次采样只采样一个通道&#xff0c;且可以随时采样不同通道的功能。 cubeMX配置 这里我们…
阅读更多...
力扣 LeetCode 150. 逆波兰表达式求值（Day5：栈与队列）

力扣 LeetCode 150. 逆波兰表达式求值（Day5：栈与队列）

解题思路&#xff1a; 逆波兰表达式就是从二叉树的后序遍历得来的&#xff08;左右根&#xff09;&#xff0c;因此计算机直接按顺序取出表达式中元素进行运算即可&#xff0c;无需考虑括号的运算顺序&#xff0c;加快运算速度 对于&#xff08;12&#xff09;x&#xff08;3…
阅读更多...
交通路口智能监测平台实现

交通路口智能监测平台实现

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;编程探索专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月15日8点12分 神秘男子影, 秘而不宣藏。 泣意深不见, 男子自持重, 子夜独自沉。 论文链接 点击开启你的论文编程之旅h…
阅读更多...
Redis 持久化机制 RDB 和 AOF 区别

Redis 持久化机制 RDB 和 AOF 区别

Redis 是一个开源的内存数据结构存储系统&#xff0c;广泛应用于缓存、会话存储、实时分析等场景。虽然 Redis 本质上是内存数据库&#xff0c;但它支持持久化机制&#xff0c;将数据保存在磁盘中以防止数据丢失。在 Redis 中&#xff0c;主要有两种持久化机制&#xff1a;RDB(…
阅读更多...
uniapp动态获取练习题的内容选项和最终选择的结果

uniapp动态获取练习题的内容选项和最终选择的结果

里面的练习题题目和选项都是动态获取的&#xff0c;提交的时候结果是多个单选题最终选择的值&#xff0c;重点是给单选组标签上加上change事件&#xff0c;多选通用&#xff0c;change事件内加一个回调&#xff0c;代码示例如下&#xff1a; <template> <view class&…
阅读更多...
联想 ThinkPad的高级键盘功能

联想 ThinkPad的高级键盘功能

前言&#xff1a; 用好键盘是程序员最需要花时间了解的。 联想ThinkPAD的高级键盘功能和windows的键盘功能是不一样的。学习一下&#xff0c;给自己的工作&#xff0c;编程带来很大的的提高。花时间是有意义的。 调出设置&#xff1a; 1 先是键盘管理&#xff1a; 这里&#…
阅读更多...
红黑树

红黑树

目录 红黑树 红黑树的概念 红黑树的性质 红黑树节点的定义 插入的代码实现 情况一 情况二 uncle不存在 uncle存在且为黑单旋 情况三 uncle存在且为黑的双旋情况 情况二和情况三的总代码 以上是父亲在爷爷左边的情况,右边的情况也类似 左旋代码 右旋代码 红黑树…
阅读更多...
最新文章

Copyright @ 2022~2023