Redux与React环境准备、实现counter(及传参)、异步获取数据

环境说明:

一:说明
在React中使用redux,官方要求安装两个其他插件:Redux Toolkit和react-redux
1. Redux ToolKit(RTK) - 官方推荐编写Redux逻辑的方式,是一套工具的集合集,简化书写方式
(简化store的配置方式 内置immer支持可变式状态修改 内置thunk更好的异步创建)2. react-redux - 用来链接Redux和React组件的中间件----------> 获取状态
(Redux react-redux React组件)<--------- 更新状态二:配置基础环境
1. 使用CRA快速创建React项目
npx create-react-app react-redux2. 安装配套工具
npm i @reduxjs/toolkit react-redux3. 启动项目
npm run start三:创建store文件夹
在src下创建store文件夹,并在store文件夹下创建index.js文件和modules文件夹,modules文件夹下创建如counter.js文件,图片如下所示:

创建store文件夹

实现counter(及传参)

1. 在counterStore.js编写如下代码:
import { createSlice } from '@reduxjs/toolkit'const counterStore = createSlice({name: 'counter',// 初始化stateinitialState: {count: 0},// 修改状态的方法 同步方法 支持直接修改reducers: {increment(state) {state.count++},decrement(state) {state.count--},incrementToTen(state, action) {console.log(action.payload); // 外层传的什么数据结构这里就是什么数据结构state.count += action.payload.number;}}
})// 解构出来actionCreater函数
const {increment, decrement, incrementToTen} = counterStore.actions;
// 获取reducer
const reducer = counterStore.reducer;// 以按需导出的方式导出actionCreater
export {increment, decrement, incrementToTen}// 以默认导出的方式导出reducer
export default reducer;2. 在store文件夹下index.js编写代码如下
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './modules/counterStore';const store = configureStore({reducer: {counter: counterReducer}
})export default store3. 在src文件夹下index.js添加store配置import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './store';
import { Provider } from 'react-redux';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>
);4. 在组件内应用
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement, incrementToTen } from './store/modules/counterStore';function App() {const { count } = useSelector(state => state.counter) // 根据第二步命名进行解构(counter)const dispatch = useDispatch();const handleIncrement = () => {dispatch(increment())}const handleDecrement = () => {dispatch(decrement())}const handleIncrementToTen = () => {dispatch(incrementToTen({number: 10}));}return (<div className="App">{count}<button onClick={handleIncrement}>增加</button><button onClick={handleDecrement}>减小</button><button onClick={handleIncrementToTen}>增加按钮传参,默认加10</button></div>);
}export default App;总结:
1. 组件中使用哪个hook函数获取store中的数据? useSelector
2. 组件中使用哪个hook函数获取dispatch方法?  useDispatch
3. 如何得到要提交action对象? 执行store模块中导出的actionCreater方法

异步获取数据

1. channelStore文件代码:import { createSlice } from '@reduxjs/toolkit';const channelStore = createSlice({name: 'channel',initialState: {channelList: []},reducers: {setChannels(state, payload) {state.channelList = action.payload}}
})// 异步请求部分
const { setChannels } = channelStore.actions;const fetchChannelList = () => {return async (dispatch) => {const res = await axios.get(url)dispatch(setChannels(res.data.data.channels))}
}const reducer = channelStore.reducer;
export { fetchChannelList }
export default reducer;2. src下store文件夹下index.js代码如下:import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './modules/counterStore';
import channerReducer from './modules/channelStore';const store = configureStore({reducer: {counter: counterReducer,channerReducer}
})export default store3. 组件内应用代码如下:import { useDispatch, useSelector } from 'react-redux';
import { fetchChannelList } from './store/modules/channelStore';
import { useEffect } from 'react';function App() {const { channelList } = useSelector(state => state.channerReducer)const dispatch = useDispatch();useEffect(() => {// 获取列表数据dispatch(fetchChannelList())}, [dispatch])return (<div className="App">{channelList}</div>);
}export default App;

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通过字符设备驱动点亮板子上的led灯

通过字符设备驱动点亮板子上的led灯 app: test.c char buf[3] 1 0 0 0 1 0 0 0 1 ------------------|------------------------ kernel: led_driver.c -------------------|------------------------ hardware: RGB_led 应用程序如何将数据传递给驱动&#xff08;读写…

Kafka日志

位置 server.properties配置文件中通过log.dir指定日志存储目录 log.dir/{topic}-{partition} 核心文件 .log 存储消息的日志文件&#xff0c;固定大小为1G&#xff0c;写满后会新增一个文件&#xff0c;文件名表示当前日志文件记录的第一条消息的偏移量。 .index 以偏移…

计算机视觉基础(13)——深度估计

前言 本节是计算机视觉的最后一节&#xff0c;我们将学习深度估计。从深度的概念和度量入手&#xff0c;依次学习单目深度估计和双目/多目深度估计&#xff0c;需要知道深度估计的经典方法&#xff0c;掌握深度估计的评价标准&#xff0c;注意结合对极几何进行分析和思考。 一、…

医疗影像中DR的骨抑制

1 背景 在DR的拍摄中&#xff0c;根据肺部和脊肋骨两种组织&#xff0c;在不同能量X射线的照射下&#xff0c;衰减的系数不同的特点&#xff0c;可以通过两次不同剂量的曝光后&#xff0c;通过算法&#xff0c;得到一张骨骼的图像和一张肺部图像。 通过一些机构的统计&#x…

MATLAB - 读取双摆杆上的 IMU 数据

系列文章目录 前言 本示例展示了如何从安装在双摆杆上的两个 IMU 传感器生成惯性测量单元 (IMU) 读数。双摆使用 Simscape Multibody™ 进行建模。有关使用 Simscape Multibody™ 构建简易摆的分步示例&#xff0c;请参阅简易摆建模&#xff08;Simscape Multibody&#xff09…

互联网+建筑工地源码,基于微服务+Java+Spring Cloud +Vue+UniApp开发

一、智慧工地概念 智慧工地就是互联网建筑工地&#xff0c;是将互联网的理念和技术引入建筑工地&#xff0c;然后以物联网、移动互联网技术为基础&#xff0c;充分应用BIM、大数据、人工智能、移动通讯、云计算、物联网等信息技术&#xff0c;通过人机交互、感知、决策、执行和…

Nginx优化(重点)与防盗链(新版)

Nginx优化(重点)与防盗链 Nginx优化(重点)与防盗链一、隐藏Nginx版本号1、修改配置文件2、修改源代码 二、修改Nginx用户与组1、编译安装时指定用户与组2、修改配置文件指定用户与组 三、配置Nginx网页的缓存时间四、实现Nginx的日志切割1、data的用法2、编写脚本进行日志切割的…

IntelliJ IDEA Community(社区版)下载及安装自用版

IntelliJ IDEA Community&#xff08;社区版&#xff09;下载及安装自用版 估计是个开发都逃脱不了用IDEA的命运吧&#xff0c;这么好的软件&#xff0c;白嫖了好多年。感恩。 现在很多公司已经不让用商业版的破解版了&#xff0c;所以这里讲的是社区版。 区别&#xff1a; 商…

【单调栈】LeetCode:2818操作使得分最大

作者推荐 map|动态规划|单调栈|LeetCode975:奇偶跳 本文涉及的基础知识点 单调栈分类、封装和总结 题目 给你一个长度为 n 的正整数数组 nums 和一个整数 k 。 一开始&#xff0c;你的分数为 1 。你可以进行以下操作至多 k 次&#xff0c;目标是使你的分数最大&#xff1a…

零基础入门网络安全必看的5本书籍(附PDF)

书中自有黄金屋&#xff0c;书中自有颜如玉。很多人学习一门技术都会看大量的书籍&#xff0c;经常也有朋友询问&#xff1a;零基础刚入门&#xff0c;应该看哪些书&#xff1f;应该怎么学&#xff1f;等等问题。今天就整理了5本零基础入门网络安全必看书籍&#xff0c;希望能帮…

hyper-v ubuntu 3节点 k8s集群搭建

前奏 搭建一主二从的k8s集群&#xff0c;如图所示&#xff0c;准备3台虚拟机。 不会创建的同学&#xff0c;可以看我上上篇博客&#xff1a;https://blog.csdn.net/dawnto/article/details/135086252 和上篇博客&#xff1a;https://blog.csdn.net/dawnto/article/details/135…

Python 数据分析 Matplotlib篇 plot设置线条样式(第2讲)

Python 数据分析 Matplotlib篇 plot设置线条样式(第2讲)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…

Django(二)

1.django框架 1.1 安装 pip install django3.21.2 命令行 创建项目 cd 指定目录 django-admin startproject 项目名mysite ├── manage.py [项目的管理工具] └── mysite├── __init__.py├── settings.py 【配置文件&#xff0c;只有一部分…

【Linux系统基础】(2)在Linux上部署MySQL、RabbitMQ、ElasticSearch等各类软件

实战章节&#xff1a;在Linux上部署各类软件 前言 为什么学习各类软件在Linux上的部署 在前面&#xff0c;我们学习了许多的Linux命令和高级技巧&#xff0c;这些知识点比较零散&#xff0c;同学们跟随着课程的内容进行练习虽然可以基础掌握这些命令和技巧的使用&#xff0c;…

【毕业快刊】IF12分,中科院2区,仅50天录用,17天见刊!国人占比第一!

计算机类 • 好刊解读 今天小编带来Springer旗下计算机领域高分快刊&#xff0c;如您有投稿需求&#xff0c;可作为重点关注&#xff01;后文有相关领域真实发表案例&#xff0c;供您投稿参考~ 01 期刊简介 Artificial Intelligence Review ✅出版社&#xff1a;Springer ✅…

Wireshark网络工具来了

Wireshark是网络包分析工具。网络包分析工具的主要作用是尝试捕获网络包&#xff0c;并尝试显示包的尽可能详细的情况。 Wireshark是一个免费开源软件&#xff0c;不需要付费&#xff0c;免费使用&#xff0c;可以直接登陆到Wireshark的官网下载安装。 在windows环境中&#x…

一个利用摸鱼时间背单词的软件

大家好&#xff0c;我是 Java陈序员。 最近进入了考试季&#xff0c;各种考试&#xff0c;英语四六级、考研、期末考等。不知道大家的英语四六级成绩怎么样呢&#xff1f; 记得大学时&#xff0c;英语四级都是靠高中学习积累的老本才勉强过关。 而六级则是考了多次&#xff…

50 个具有挑战性的概率问题 [第 5 部分]:方形硬币

一、说明 你好&#xff0c;我最近对与概率相关的问题产生了兴趣。我偶然发现了 Frederick Mosteller 所著的《五十个具有挑战性的概率问题及其解决方案》这本书。我认为创建一个系列来讨论这些可能作为面试问题出现的迷人问题会很有趣。每篇文章仅包含 1 个问题&#xff0c;使其…

css学习笔记6(盒子模型)

CSS盒子模型 五、CSS盒子模型1.CSS长度单位2.元素的显示模式3.总结各元素的显示模式4.修改元素显示模式5.盒子模型的组成6.盒子内容区&#xff08;content&#xff09;7.关于默认宽度8.盒子内边距&#xff08;padding&#xff09;9.盒子边框&#xff08;border&#xff09;10.盒…

在Jetpack Compose中使用ExoPlayer实现直播流和音频均衡器

在Jetpack Compose中使用ExoPlayer实现直播流和音频均衡器 背景 ExoPlayer与Media3的能力结合&#xff0c;为Android应用程序播放多媒体内容提供了强大的解决方案。在本教程中&#xff0c;我们将介绍如何设置带有Media3的ExoPlayer来支持使用M3U8 URL进行直播流。此外&#x…