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.mzph.cn/news/862781.shtml

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

相关文章

自动化代码规范检查--Sonarqube部署

参考文档 官方文档安装数据库 官方给出几种数据库: # 我们选用postgres, 拉取镜像 docker pull postgres:16.0# 创建存储卷 docker volume create postgresql-data# 运行容器 docker run -d --name sonarqube-postgres \-p 5432:5432 \-e POSTGRES_DB=sonar_DB \-e POSTGRE…

高性价比蓝牙耳机有哪些?2024超高性价比蓝牙耳机推荐

在2024移动互联网高速发展的时代&#xff0c;蓝牙耳机已成为我们生活中不可或缺的一部分。走在街头&#xff0c;低头看手机&#xff0c;滑动屏幕选歌&#xff0c;耳边传来清晰的旋律&#xff0c;这一幕已经成为现代生活的标配。但面对市场上琳琅满目的蓝牙耳机品牌和型号&#…

数据库同步最简单的方法

数据库同步到底有咩有简单的方法&#xff0c;有肯定是有的&#xff0c;就看你有咩有缘&#xff0c;看到这篇文章&#xff0c;你就是有缘人。众所周知&#xff0c;数据库同步向来都不是一件简单的事情&#xff0c;它很繁琐&#xff0c;很费精力&#xff0c;很考验经验&#xff0…

力扣 刷题 使用双指针进行数组去重分析

目录 双指针 一、26.删除有序数组中的重复项 题目 题解 二、80. 删除有序数组中的重复项 II 题目 题解 三、27. 移除元素 题目 题解 双指针 我们这里所说的双指针实际上并不是真正的指针&#xff0c;它只是两个变量&#xff0c;用于标识数组的索引等&#xff0c;因其…

vue3封装表格嵌套表单问题汇总

1.插槽嵌套多层数据ui组件怎么使用 思路&#xff1a;插槽具名【区分】后暴露传递&#xff0c;这个为神魔要区分&#xff0c;因为封装组件表格列表项也有插槽 步骤一&#xff1a;表单插槽暴露 <ElFormclass"form-search":model"formParams"ref"form…

java基于ssm+jsp 多人命题系统

1管理员功能模块 管理员登录&#xff0c;管理员通过输入用户、密码等信息进行系统登录&#xff0c;如图1所示。 图1管理员登录界面图 管理员对个人中心进行操作填写原密码、新密码、确认密码并进行添加、删除、修改以及查看&#xff0c;如图2所示。 图2个人信息功能界面图 学…

台式电脑没有音响?你还可以用这 7 个软件把手机变成音响

台式电脑没有音响&#xff1f;你还可以用这 7 个软件把手机变成音响 怎么让手机当电脑音响 怎么让电脑连接手机的麦克风 手机怎么变电脑麦克风 1.AudioRelay 官网audiorelay加点net提供 Windows 和 Android 应用程序下载 再打开作为 Client 的 Android 端&#xff0c;它会自…

遥感数据并行运算(satellite remote sensing data parallell processing)

文章内容仅用于自己知识学习和分享&#xff0c;如有侵权&#xff0c;还请联系并删除 &#xff1a;&#xff09; 之前不太会用&#xff0c;单纯想记录一下&#xff0c;后面或许还会用到 1. 教程 [1] Pleasingly Parallel Programming: link 1.1 处理器&#xff0c;核和线程 …

申请免费6个月SSL证书方式和证书特点槽点

当前&#xff0c;HTTPS访问已成为网站标配。随着免费证书平台的不断涌现&#xff0c;Lets Encrypt尤为瞩目&#xff0c;其提供的泛域名和多域名证书申请功能&#xff0c;显著降低了站长和企业的经济负担。从一开始&#xff0c;来此加密就支持通过Lets Encrypt申请免费的域名SSL…

力扣:203. 移除链表元素(Java)

目录 题目描述&#xff1a;示例 1&#xff1a;示例 2&#xff1a;代码实现&#xff1a; 题目描述&#xff1a; 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入…

ONLYOFFICE 8.1版本桌面编辑器深度体验:创新功能与卓越性能的结合

ONLYOFFICE 8.1版本桌面编辑器深度体验&#xff1a;创新功能与卓越性能的结合 随着数字化办公的日益普及&#xff0c;一款高效、功能丰富的办公软件成为了职场人士的必备工具。ONLYOFFICE团队一直致力于为用户提供全面而先进的办公解决方案。最新推出的ONLYOFFICE 8.1版本桌面编…

Centos安装redis(附:图形化管理工具)

第一步&#xff1a;下载redis wget http://download.redis.io/releases/redis-6.2.7.tar.gz 第二步&#xff1a;解压 tar zxvf redis-6.2.7.tar.gz 第三步&#xff1a;安装依赖环境 yum -y install gcc-c第四步&#xff1a;安装依赖环境 make install第五步&#xff1a;修…

高频科技亮相SEMl-e2024第六届深圳国际半导体展,以超纯工艺推动行业发展

6月26-28日,SEMl-e2024第六届深圳国际半导体展在深圳国际会展中心(宝安新馆)隆重举办。本次展会以【“芯”中有“算”智享未来】为主题,汇聚800多家展商,集中展示了集成电路、电子元器件、第三代半导体及产业链材料和设备为一体的半导体产业链,搭建了供需精准对接、探索行业新发…

ElementUI笔记

Element&#xff0c;一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 首先安装 ElementUI。 需要再HTML的文档终端里输入 npm i element-ui -S 在 main.js 中写入以下内容&#xff1a; import ElementUI from element-ui ; import element-ui/lib…

超全汇总,性能测试常用指标大全

前言 两种性能指标 业务指标&#xff1b; 技术指标&#xff1b; 通常我们会从两个层面定义性能场景的需求指标&#xff0c;它们有映射关系&#xff0c;技术指标不能脱离业务指标 1、并发 狭义&#xff1a; 指同一个时间点执行相同的操作&#xff08;如&#xff1a;秒杀&am…

【ElementPlus源码】Container 布局容器

文章目录 index.tsContainerheaderutilswithInstallwithNoopInstall hooksuseNamespace 单元测试 看源码时候做的笔记。如有错误请指出&#xff01; 关于路径的省略&#xff0c;详见button&#xff1a;【ElementPlus源码】Button按钮-CSDN博客 index.ts 导入一堆组件&#xff…

003-GeoGebra如何无缝嵌入到PPT里

GeoGebra无缝嵌入到PPT里真是一个头疼的问题&#xff0c;已成功解决&#xff0c;这里记录一下&#xff0c;希望可以帮助到更多人。 注意&#xff0c;后续所有的文章说的PPT都是Offce Power Point, 不要拿着WPS的bug来问我哦&#xff0c;我已经戒WPS了&#xff08;此处表示无奈&…

Vue组件化、单文件组件以及使用vue-cli(脚手架)

文章目录 1.Vue组件化1.1 什么是组件1.2 组件的使用1.3 组件的名字1.4 嵌套组件 2.单文件组件2.1 vue 组件组成结构2.1.1 template -> 组件的模板结构2.1.2 组件的 script 节点2.1.3 组件的 style 节点 2.2 Vue组件的使用步骤2.2.1 组件之间的父子关系2.2.2 使用组件的三个步…

直播电商APP源码

你有没有想过&#xff0c;如何通过手机就能够触手可及地购买到你想要的商品呢?直播电商APP源码&#xff0c;为你带来了全新的购物体验。它不仅为用户提供了便捷快速的购物平台&#xff0c;还为商家提供了一个高效的销售渠道。 武汉迅狐科技有限公司研发的直播电商APP源码&…

Python | Leetcode Python题解之第190题颠倒二进制位

题目&#xff1a; 题解&#xff1a; class Solution:# param n, an integer# return an integerdef reverseBits(self, n):n (n >> 16) | (n << 16);n ((n & 0xff00ff00) >> 8) | ((n & 0x00ff00ff) << 8);n ((n & 0xf0f0f0f0) >&g…