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,一经查实,立即删除!

相关文章

Python入门-基础知识-模块

Python程序中的模块的功能与函数相似&#xff0c;有助于更好地组织代码&#xff0c;提高代码的利用率。模块是一 种以“.py”为扩展名的文件&#xff0c;其中可以包含变量、函数等各种代码形式。导入模块后&#xff0c;就可以使用 模块中的变量、函数等。Python库着重强调功能性…

随着量子计算的崭露头角,C 语言在未来是否需要做出适应性的改变,以适应新的计算架构和算法?

随着量子计算的发展&#xff0c;C语言可能需要进行一些适应性的改变以适应新的计算架构和算法。量子计算与经典计算存在很大的差异&#xff0c;涉及到量子比特、量子门和量子算法等概念。因此&#xff0c;为了更好地支持量子计算&#xff0c;C语言可能需要引入新的数据类型和算…

JS面试题7——localStorage,sessionStorage,cookie的区别

公共点&#xff1a;都是用于在客户端存放数据的 区别&#xff1a; 1. 数据存放的有效期不同 <script> sessionStorage.setItem("key", "123"); // 仅在当前浏览器窗口关闭前有效 localStorage.setItem("key", "456"); // 持久化…

自动化代码规范检查--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…

PostgreSQL删除重复数据同时保留每组中的一条记录

PostgreSQL删除重复数据同时保留每组中的一条记录 在 PostgreSQL 中&#xff0c;你不能直接从一个 CTE&#xff08;公共表表达式&#xff09;中删除数据&#xff0c;因为 CTE 只是一个临时的结果集&#xff0c;它并不直接对应一个可以更新的表。但是&#xff0c;你可以使用 CT…

Nsight Compute 是怎么计算Roofline的呢

Nsight Compute 是怎么计算Roofline的呢 1.参考链接2.小结3.Nsight Compute 是怎么计算Roofline的呢4.生成测试程序5.测试规模为8192时的性能6.计算Roofline7.指标解释8.测试规模为1024时的性能9.测试规模为128时的性能10.RTX 3060基础能力测试11.sm__inst_executed.avg.pct_of…

IPv6测试指标有哪些?怎么看网站是否完成IPv6升级改造?

IPv6是互联网第六代协议&#xff0c;以其近乎无限的地址资源为未来互联网的发展提供了广阔空间和无限可能&#xff0c;为物联网、大数据、人工智能等新基建的蓬勃发展提供了坚实的网络支撑。我国高度重视IPv6的发展建设&#xff0c;自2017年《推进互联网协议第六版&#xff08;…

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

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

数据库同步最简单的方法

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

Kali Linux源

中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib deb-src http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib阿里云 deb http://mirrors.aliyun.com/kali kali-rolling main non-free contrib deb-src http://mirrors.…

risc-v 怎么使用内存呢?

内存地址对齐 一般写法 #define ALIGN_4_BYTES 4 #define ALIGN_4_MASK (ALIGN_4_BYTES - 1) //4字节地址对齐 static inline uintptr_t align_4_bytes(uintptr_t address) {return (address ALIGN_4_MASK) & ~ALIGN_4_MASK; }//定义页大小是4k&#xff0c;2的12次方是409…

【LeetCode】每日一题:K个一组反转链表

解题思路 其实更像一个模拟题&#xff0c;但是有两个地方的边界一直没有处理好导致卡了很久。 AC代码 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solut…

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

目录 双指针 一、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个人信息功能界面图 学…

vue项目连接多个服务后台地址

vue项目连接多个服务器 场景描述&#xff1a;由于公司项目需要基于若依框架和starlingX后台开发&#xff0c;所以&#xff0c;项目至少要连接两个后台地址 在 vue.config.js 文件里 添加一个地址 devServer: {host: "0.0.0.0",port: port,open: true,proxy: {[pro…

台式电脑没有音响?你还可以用这 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; 输入…