React的Redux的状态管理

步骤

1.创建新项目

npx create-react-app react-redux

2.安装配套工具

npm i @reduxjs/toolkit react-redux

3.启动项目

npm run start

4.在src目录下创建store文件夹

5.在store文件夹下创建modules文件夹

6.在store文件夹里创建index.js文件

7.在counterStore.js文件里编写子store(使用React Toolkit 创建 counterStore)

// createSlice  是为了创建store用的
import { createSlice} from "@reduxjs/toolkit"const counterStore= createSlice({// 模块name:'counter',// 初始化state(状态)initialState:{count:0},//(修改状态的方法) 编写书写数据的方法,同步方法,支持直接修改reducers:{inscrement(state){state.count++;},decrement(state){state.count--;},inscrementTen(state,actions){console.log("actions",actions);state.count= state.count+actions.payload;},// action传递对象actionObg(state,actions){console.log("测试传递对象",actions);}}
})
// 解构出来actionCreater函数
const {inscrement,decrement,inscrementTen,actionObg} =counterStore.actions;
// 获取reducer
const counterReducer = counterStore.reducer
// 以按需导出的方式导出actionCreater
export {inscrement,decrement,inscrementTen,actionObg}
// 以默认导出的方式发哦出reducer
export default counterReducer;

8.在store文件夹的index.js里组合moudels里的子模块,并导出store

import { configureStore } from "@reduxjs/toolkit";
// 导入子模块reducer (counterReducer,channelReducer  这俩名称是counterStore.js和chaenlStore.js最后一行导出来的名称)
import counterReducer from './modules/counterStore'
import channelReducer from "./modules/chaenlStore";// 创建子组合模块
// 根store
const store =configureStore({reducer:{counter:counterReducer,channel:channelReducer}
})
export default store 

9.在src文件夹下的index.js文件里   为React注入store

// 使React
import store from './store';
// 导出;来的Provider  用于下面标签里
import {Provider} from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<React.StrictMode>{/* 注入store   Provider标签很重要 */}<Provider store={store}><App /></Provider></React.StrictMode>
);
10.React组件使用store中的数据

在React组件中使用store中的数据,需要用到一个钩子函数-useSelector,它的作用是把store中的数据映射到组件中

useDispatch是React-Redux库提供的一个钩子函数,它用于访问Redux store的dispatch函数。useDispatch可以让你从函数组件中派发actions。

app.js文件


// useSelector  获取store里面 变量
// useDispatch作用可以修改store里面变量
import {useSelector,useDispatch} from 'react-redux'
// 导入actionCreater
import { decrement,inscrement,inscrementTen,actionObg } from './store/modules/counterStore'; 

function App() {// 使用回调函数state拿到任意一个模块  counter和channel  名称来自strore文件夹下的index.js文件里绑定的模块名const {count} =useSelector(state => state.counter)const {channelList}= useSelector(state=>state.channel)const dispatch=useDispatch();// 使用useEffect触发异步接口调用   [dispatch]  的意思是调用dispatch一次执行一次useEffect(()=>{dispatch(fetchChannlList());},[dispatch])return (<div className="App"> <button onClick={()=>dispatch(decrement())}>-</button>alksdfn---{count}<button onClick={()=>dispatch(inscrement())}>+</button><button onClick={()=>dispatch(inscrementTen(10))}>+10</button><button onClick={()=>dispatch(actionObg({'age':10,'qie':20}))}>提交action传递对象</button><ul>{channelList.map((item,index)=><li key={item.id}>{item.name}</li>)}<li></li></ul></div>);
}export default App;

修改Store里面变量的唯一方法就是提交一个action

redux异步从后台获取数据

安装Axios异步请求库、

npm i axios

谷歌插件调试React项目

插件下载地址(https://chromewebstore.google.com/detail/lmhkpmbekcpmknklioeibfkpmmfibljd)

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

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

相关文章

NAS安全存储怎样实现更精细的数据权限管控?

NAS存储&#xff0c;即网络附属存储&#xff08;Network Attached Storage&#xff09;&#xff0c;是一种专用数据存储服务器&#xff0c;其核心特点在于将数据存储设备与网络相连&#xff0c;实现集中管理数据的功能。 NAS存储具有以下明显优势&#xff0c;而被全球范围内的企…

一篇文章,告诉大家定向流量有多坑?

先奉劝大家一下&#xff0c;在网上选购流量卡的时候&#xff0c;对于流量的类型大家一定看清楚了&#xff0c;一定要选择通用流量多的套餐&#xff0c;通用流量&#xff0c;通用流量&#xff0c;重要的事情说三遍&#xff0c;可以忽略定向流量。 为什么要让大家看通用流量&…

MySQL索引优化解决方案--索引优化(4)

排序优化 尽量避免使用Using FileSort方式排序。order by语句使用索引最左前列或使用where子句与order by子句条件组合满足索引最左前列。where子句中如果出现索引范围查询会导致order by索引失效。 优化案例 联表查询优化 分组查询优化 慢查询日志

Luminar Neo 1.20.0 (macOS Universal) - 创新 AI 图像编辑器

Luminar Neo 1.20.0 (macOS Universal) - 创新 AI 图像编辑器 利用尖端的人工智能生成技术&#xff0c;轻松增强照片效果 请访问原文链接&#xff1a;https://sysin.org/blog/luminar-neo/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1…

学会整理电脑,基于小白用户(无关硬件升级)

如果你不想进行硬件升级&#xff0c;就要学会进行整理维护电脑 基于小白用户&#xff0c;每一个操作点我都会在后续整理出流程&#xff0c;软件推荐会选择占用小且实用的软件 主要从三个角度去讨论【如果有新的内容我会随时修改&#xff0c;也希望有补充告诉我&#xff0c;我…

中国首例!「DataKit」上架亚马逊云科技 Marketplace add-ons

在 2022 年的 re:Invent 大会上&#xff0c;亚马逊云科技宣布了一项重大更新&#xff1a;亚马逊云科技 Marketplace 为 Amazon Elastic Kubernetes Service&#xff08;Amazon EKS&#xff09;提供了附加组件的支持。这一创新功能极大地丰富了 EKS 的生态系统&#xff0c;使用户…

spring原理篇

第三方bean默认为方法名 自动配置 自动配置的原理 springboot的自动配置原理 首先是从 SpringBootApplication这个注解出发 有一个ComponentScan()默认扫描同级包及其子包 第二个注解是springbootconfiguration 声明当前类是一个配置类 第三个是核心 enableAutoConfigurati…

github无法访问,下载慢的解决方法

GitHub是一个存储分享无数的开源项目和代码的宝库网站。然而&#xff0c;由于一些原因&#xff0c;国内用户在访问GitHub时常常遭遇无法访问或下载速度缓慢的问题。这不仅影响了开发者的工作效率&#xff0c;也使一些想要访问下载github文件的普通用户遇到困难。下面小编就来和…

Android 11 ,默认授予预置应用/APK 需要的权限,解决permission denied for window type 2003 问题。

写这篇文章的原因是解决了一个APP闪退的问题&#xff0c;闪退的原因是插拔U盘时&#xff0c;注册的广播接收者接收到广播需要弹出一个Dialog询问是否需要打开U盘&#xff0c;这个Dialog设置的是系统级别悬浮窗&#xff0c;没有这个权限&#xff0c;报错导致闪退&#xff0c;下面…

【机器学习】在【R语言】中的应用:结合【PostgreSQL数据库】的【金融行业信用评分模型】构建

目录 1.数据库和数据集的选择 1.准备工作 2.PostgreSQL安装与配置 3.R和RStudio安装与配置 2.数据导入和预处理 1.连接数据库并导入数据 1.连接数据库 2.数据检查和清洗 1.数据标准化 2.拆分训练集和测试集 3.特征工程 1.生成新特征 2.特征选择 4.模型训练和评估…

[深度学习] 卷积神经网络CNN

卷积神经网络&#xff08;Convolutional Neural Network, CNN&#xff09;是一种专门用于处理数据具有类似网格结构的神经网络&#xff0c;最常用于图像数据处理。 一、CNN的详细过程&#xff1a; 1. 输入层 输入层接收原始数据&#xff0c;例如一张图像&#xff0c;它可以被…

Android app Java层异常捕获方案

背景&#xff1a; 在Android app运行中&#xff0c;有时一些无关紧要的异常出现时希望App 不崩溃&#xff0c;能继续让用户操作&#xff0c;可以有效提升用户体验和增加业务价值。 新流程&#xff1a; 哪些场景需要Catch Crash Config配置信息&#xff1a; 支持从网络上获…

Linux入门攻坚——27、httpd2.4配置使用、lamp基础

CentOS 7上&#xff0c;httpd已经到了2.4版本&#xff0c;新增了很多新特性&#xff1a; &#xff08;1&#xff09;MPM支持运行DSO机制&#xff1b;以模块形式按需加载 &#xff08;2&#xff09;支持event MPM&#xff1b; &#xff08;3&#xff09;支持异步读写&#xff1…

Linux-笔记 高级I/O操作

前言 I/O&#xff08;Input/Output&#xff0c;输入/输出&#xff09;是计算机系统中的一个重要组成部分&#xff0c;它是指计算机与 外部世界之间的信息交流过程。I/O 操作是计算机系统中的一种基本操作&#xff0c;用于向外部设备&#xff08;如 硬盘、键盘、鼠标、网络等&am…

【深度强化学习】如何使用多进程(multiprocessing、pipe)来加速训练

文章目录 实验结果实现思路思路1思路2 进程与线程介绍如何实现multiprocessing、Pipe的范例关于时间对比上的问题代码修改收敛为何不稳定 技巧进程资源抢占问题线程问题cpu和gpu问题 进阶&#xff08;还没看懂/还没实验&#xff09;附代码raw代码mul代码 实验结果 实验平台&am…

群辉NAS使用Kodi影视墙

目录 一、KODI安装 二、修改UI语言 1、修改显示字体 2、修改语言为中文 四、添加媒体库 五、观看电影 五、高级设置 1、视图类型 2、修改点击播动作 五、补充 1、文件组织结构及命名 2、电影信息的刮削 (1)添加影片 (2)演员管理 (3)影片管理 (4)说明 K…

职业本科院校电子信息类专业教学解决方案

引言 随着信息技术的飞速进步和全球经济的深度融合&#xff0c;电子信息领域已成为推动社会发展的核心动力。职业本科教育作为培养高素质技能型人才的主阵地&#xff0c;面临着前所未有的挑战与机遇。特别是在电子信息类专业领域&#xff0c;如何培养出既掌握前沿理论知识&…

酷开系统丨酷开科技AI赋能数字大屏,开启智能家居新纪元

在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的崛起无疑为科技领域带来了革命性的变化。酷开科技&#xff0c;正以其独特的"AI数字大屏"战略&#xff0c;将创新理念转化为现实&#xff0c;引领行业发展新潮流。 酷开科技的智能电视操作系统…

【大数据技术原理与应用(概念、存储、处理、分析与应用)】第1章-大数据概述习题与知识点回顾

文章目录 单选题多选题知识点回顾几次信息化浪潮主要解决什么问题&#xff1f;信息科技为大数据时代提供哪些技术支撑&#xff1f;数据产生方式有哪些变革&#xff1f;大数据的发展历程大数据的四个特点&#xff08;4V&#xff09;大数据对思维方式的影响大数据有哪些关键技术&…