在react中使用redux react-redux的使用demo

前言:

redux是一种状态管理工具,可以存储和操作一些全局或者很多组件需要使用的公共数据。

平心而论,redux的使用对于新上手来说不太友好,多个依赖包的,多种api的结合使用,相对来说比做同样一件事的vuex用起来比较麻烦.不过,熟能生巧,用多了也就习惯了,下面是个人的一个demo,是自己根据尚硅谷张天禹react教程学习的,然后写的demo.

这个demo是一个实用版本的demo,而不是深入研究redux本身的各种api操作

思路和准备:

需要的依赖包:

redux : 状态管理的核心插件(不仅仅是在react中能用,也可以在vue中用,但很显然,vue不需要 !--)

react-redux : 专门让redux和react之间对接的一个插件,让redux写起来没有那么的麻烦,(相对没有)

redux-devtools-extension : 调试工具,类似于vue-devtools,方便调试和查看,(当然了,本人是console.log党,用得少,配置上就行了)

redux-thunk: 可以让redux的值进行异步的修改,比较重要,能节省不少东西

思路:

首先,先要创建一个store,store是每个组件访问的核心,就像淘宝网站一样.

然后每个网站里面都有自己的商店,不同的商店对应不同的商品和购买方式,所以你就需要针对具体的数据类型,配置具体操作他的方法.

然后每个组件就像消费者一样,可以直接访问淘宝网站和站内所有的店铺,并且可以选取你希望他方式购买他,并且你的消费对其他客户也会造成影响,比如这件商品只剩一件了,你买了,其他用户就没货了,这也就是全局数据状态共享的意义.

ok了.学会了这些,那就直接展示代码了,感觉条例还是比较清晰的.

文件结构

|-- src(业务文件夹)        ---------------互联网世界

    |--pages(普通组件文件夹)    --------------电商领域     

        |--index.jsx(demo父组件)    --------------消费者集合

        |--demo1.jsx(子组件1)   --------------消费者1

        |--demo2.jsx(子组件2)   --------------消费者2

    |--redux(redux文件夹)

        |--actions(修改demo1数据状态的操作函数集合)  ------------消费者购物方式集合

            |--demo1Actions.js(demo1数据操作方法)     -------------京东支付,选择加急,使用京豆

            |--demo2Actions.js(demo2数据操作方法)     -------------微信支付,不着急,坐等快递

        |--reducers(全局状态初始化和操作分发的集合)  

            |--demo1.js(demo1的数据)  -------------网店1

            |--demo2.js(demo2的数据)  -------------网店2

            |--index.js(全局数据集合)  --------------网店集合

        |--store.js(全局数据的载体)   ---------------电商网站

|--App.jsx(根组件) 

|--main.jsx(项目入口组件)   ---------------互联网

大概就是这么一个比喻,希望看客老爷们能理解我的这种比喻

某位大佬创建了一个电商网站,叫做四道(store).store里面可以创建很多网店,这些网店叫做瑞丢瑟斯(reducers).现在两个消费者,戴某1和戴某2,有两个店铺叫做demo1和demo2.

戴某1看上了demo1店铺的一件商品,情侣表,这个商品只有2件了,然后demo1就买了他,他将这个商品的接收地址分别发给了他自己和他对象那里,这个怎么买是他自己决定的,这个操作就是艾克神(action).因为戴某1买了这两件件商品,demo1店铺里面就没有这两件商品了.等到戴某2也想买这件商品的时候,发现这件商品已经空了.所以,店铺练得商品就是全局的数据or状态.

ok了,上具体代码:

代码

redux/store.js
// store构建方法
import {legacy_createStore,applyMiddleware} from 'redux'// 支持异步
import thunk from 'redux-thunk'// 开发工具
import {composeWithDevTools} from 'redux-devtools-extension'// 所有的reducers
import reducer from './reducers'// 将这些方法和参数组合,形成一个全局的store,store也是redux的核心
export default legacy_createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))
main.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import 'reset-css'
import './index.css'
import store from './redux/store.js'
import {Provider} from 'react-redux'ReactDOM.createRoot(document.getElementById('root')).render(// <React.StrictMode><Provider store={store}><App /></Provider>// </React.StrictMode>,
)
redux/reducers/index.js
import {combineReducers} from 'redux'
import demo1 from './demo1'
import demo2 from './demo2'//将会在store上暴露的模块
export default combineReducers({demo1,demo2
})
redux/reducers/demo1.js
const initValue = 0
export default function demo1(value = initValue,action){console.log(action,'点击了')const {type,data} = actionswitch(type){case 'add':return value+data;case 'delete':return value-data;default:return value}
}
redux/reducers/demo2.js
//初始化的值
const initValue = {name:'王惊涛',age:27
}export default function demo2(value=initValue,action){
const {type,data} = action
switch(type){case 'change':return datadefault:return value
}
}
redux/actions/demo1Actions.js
export const addAction = data => ({type:'add',data})
export const deleteAction = data => ({type:'delete',data})
export const asyncAddAction = (data,time) => {return (dispatch)=>{setTimeout(()=>{dispatch(addAction(data))},time)}
} 
redux/actions/demo2Actions.js
export const changeData = data => ({type:'change',data})
src/pages/index.jsx
import React, { Component } from 'react'
import withRouter from '../../utils/withRouter'
import Demo1 from './demo1'
import Demo2 from './demo2'
export default  withRouter(class index extends Component {render() {return (<div><Demo1></Demo1><hr /><Demo2></Demo2></div>)}
})
src/pages/demo1.jsx
import React, { Component } from 'react'
import withRouter from '../../utils/withRouter'
import {connect} from 'react-redux'
import {addAction,deleteAction} from '../../redux/actions/demo1Actions'
import {Button} from 'antd'
const Demo1 =  withRouter(class index extends Component {addValue = ()=>{this.props.addAction(1)}deleteValue = ()=>{this.props.deleteAction(1)}render() {console.log(this.props,'this.props---')return (<div><h4>demo1页面</h4><p>原始操作值:{this.props.demo1}</p><Button onClick={this.addValue}>增加1</Button><Button onClick={this.deleteValue}>减少1</Button><br /><p>demo2里面的内容:---- 姓名:{this.props.demo2.name}   年龄:{this.props.demo2.age}</p></div>)}
})export default connect(state =>({demo1:state.demo1,demo2:state.demo2}),{addAction,deleteAction}
)(Demo1)
src/pages/demo2.jsx
import React, { Component } from 'react'
import withRouter from '../../utils/withRouter'
import { connect } from 'react-redux'
import {changeData} from '../../redux/actions/demo2Actions'
import {addAction} from '../../redux/actions/demo1Actions'
import {Input,Button} from 'antd'
const Demo2 = withRouter( class index extends Component {state = {data:null}InputStype = {width:'400px'}componentDidMount(){console.log(this.props,'demo2中的props值')this.setState({data:this.props.demo2},()=>{console.log(this.props,'this.props---demo2???')})}changeData = ()=>{this.props.changeData({name:'马师',age:28})}addHandler = ()=>{this.props.addAction(1)}render() {return (<div><h4>demo2页面</h4><Button onClick={this.changeData}>修改值</Button><Button onClick={this.addHandler}>增加值</Button><p>姓名:{this.props.demo2.name}</p><p>年龄:{this.props.demo2.age}</p><br /><p>demo1里面的值:{this.props.demo1}</p></div>)}
})export default connect(state=>({demo1:state.demo1,demo2:state.demo2}),{changeData,addAction}
)(Demo2)
withRouter.jsx
import {useLocation,useNavigate,useParams,} from "react-router-dom";function withRouter(Component) {function ComponentWithRouterProp(props) {let location = useLocation();let navigate = useNavigate();let params = useParams();return (<Component{...props}router={{ location, navigate, params }}/>);}return ComponentWithRouterProp;}export default withRouter

感觉有用的就给个赞吧,谢啦!

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

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

相关文章

Linux文本编辑器vim使用和配置详解

vim介绍 ​ vim是Linux的一款文本编辑器&#xff0c;可以用来编辑代码&#xff0c;而且支持语法高亮&#xff0c;还可以进行一系列配置使vim更多样化。也可以运行于windows&#xff0c;mac os上。 ​ vim有多种模式&#xff0c;但目前我们只介绍绝大多数场景用的到的模式&…

树结构及其算法-二叉树节点的插入

目录 树结构及其算法-二叉树节点的插入 C代码 树结构及其算法-二叉树节点的插入 二叉树节点插入的情况和查找相似&#xff0c;重点是插入后仍要保持二叉查找树的特性。如果插入的节点已经在二叉树中&#xff0c;就没有插入的必要了&#xff0c;如果插入的值不在二叉树中&…

集线器、交换机、网桥、路由器、网关

目录 集线器(HUB)交换机(SWITCH)网桥(BRIDGE)路由器(ROUTER)网关(GATEWAY)交换机和路由器的区别参考 集线器(HUB) 功能 集线器对数据的传输起到同步、放大和整形的作用 属于物理层设备 工作机制 使用集线器互连而成的以太网被称为共享式以太网。当某个主机要给另一个主机发送单…

轻量封装WebGPU渲染系统示例<13>- 屏幕空间后处理效果(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/ScreenPostEffect.ts 此示例渲染系统实现的特性: 1. 用户态与系统态隔离。 细节请见&#xff1a;引擎系统设计思路 - 用户态与系统态隔离-CSDN博客 2. 高频调用与低频调用隔离。…

【Unity实战】最全面的库存系统(五)

文章目录 先来看看最终效果前言配置商店系统数据创建另一个NPC绘制商店UI控制商店开关列出商品添加和删除物品功能添加商品到购物车购买商品购物车删除物品商店预览效果购买和出售切换出售功能保存商店数据快捷栏物品切换和使用完结 先来看看最终效果 前言 本期也是最好一期&a…

数字孪生技术与VR:创造数字未来

在当今数字化浪潮中&#xff0c;数字孪生和虚拟现实&#xff08;VR&#xff09;技术是两大亮点&#xff0c;它们以独特的方式相互结合&#xff0c;为各个领域带来了创新和无限可能。本篇文章将探讨数字孪生与VR之间的关系&#xff0c;以及它们如何共同开辟未来的新前景。 数字…

FreeRTOS_事件标志组

目录 1. 事件标志组简介 2. 创建事件标志组 2.1 函数 xEventGroupCreate() 2.2 函数 xEventGroupCreateStatic() 3. 设置事件位 3.1 函数 xEventGroupClearBits() 3.2 函数 xEventGroupClearBitsFromISR() 3.3 函数 xEventGroupSetBits() 3.4 函数 xEventGroupSetB…

项目实战:分页功能实战

1、在index.html添加点击事件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><link rel"stylesheet" href"style/index.css"><script src"scr…

点大商城V2版 2.5.2.1 全开源独立版 多小程序端+unipp安装教程

点大商城V2是一款采用全新界面设计支持多端覆盖的小程序应用&#xff0c;支持H5、微信公众号、微信小程序、头条小程序、支付宝小程序、百度小程序&#xff0c;本程序是点大商城V2独立版&#xff0c;包含全部插件&#xff0c;代码全开源&#xff0c;并且有VUE全端代码。分销&am…

基于运动想象的公开数据集:Data set IVa (BCI Competition III)

由Fraunhofer FIRST、智能数据分析小组&#xff08;Klaus-Robert Mller、Benjamin Blankertz&#xff09;以及Charit - 柏林大学医学部本杰明富兰克林校区神经学系神经物理学小组&#xff08;Gabriel Curio&#xff09;提供的数据集。 致Benjamin Blankertz ⟨benjamin.blanker…

万岳讲堂:抖音小程序开发入门指南

抖音小程序可以将开发者的创意带入这个热门的应用中。本文将带您深入了解抖音小程序的开发入门指南&#xff0c;帮助您开始在这一平台上构建自己的应用。 一、什么是抖音小程序&#xff1f; 抖音小程序是一种轻量级的应用程序&#xff0c;它可以在抖音中直接运行&#xff0c;无…

Java8 Stream API全面解析——高效流式编程的秘诀

文章目录 什么是 Stream Api?快速入门流的操作创建流中间操作filter 过滤map 数据转换flatMap 合并流distinct 去重sorted 排序limit 限流skip 跳过peek 操作 终结操作forEach 遍历forEachOrdered 有序遍历count 统计数量min 最小值max 最大值reduce 聚合collect 收集anyMatch…

python 成绩统计,输出及格率和优

题目描述&#xff1a; 小蓝给学生们组织了一场考试&#xff0c;卷面总分为100分&#xff0c;每个学生的得分都是一个0到100的整数。 如果得分至少是60分&#xff0c;则称为及格。如果得分至少为85分&#xff0c;则称为优秀。 请计算及格率和优秀率&#xff0c;用百分数表示&am…

【Shell 系列教程】shell基本运算符(四)

文章目录 往期回顾关系运算符布尔运算符逻辑运算符字符串运算符文件测试运算符其他检查符&#xff1a; 往期回顾 【Shell 系列教程】shell介绍&#xff08;一&#xff09;【Shell 系列教程】shell变量&#xff08;二&#xff09;【Shell 系列教程】shell数组&#xff08;三&am…

虚拟机保护工具:Zerto Virtual Replication 10.0 U1 Crack

Zerto虚拟复制是为需要保护虚拟机和应用程序的企业设计的产品。通过通过连接到广域网或云到远程站点的复制来保护虚拟机。Zerto VR 2.0还可以与vCloud Director一起将虚拟机或虚拟机组复制到云端&#xff08;或从云端&#xff09;。 事实上&#xff0c;Zerto与33家云提供商合作…

Unity在Project右键点击物体之后获取到点击物体的名称

Unity在Project右键点击物体之后获取到点击物体的名称 描述&#xff1a; 在Unity的Project右键点击物体之后选择对应的菜单选项点击之后打印出物体的名称 注意事项 如果获取到文件或者预制体需要传递objcet类型&#xff0c;然后使用 GameObject.Instantiate((GameObject)se…

WiFi模块在智能家居中的应用与优化

智能家居技术的迅速发展已经改变了我们对家庭的定义。WiFi模块作为智能设备连接的核心&#xff0c;扮演着连接和控制智能家居生态系统的关键角色。本文将深入研究WiFi模块在智能家居中的应用&#xff0c;同时探讨如何通过优化来提升其性能和用户体验。 1. 智能家居中WiFi模块的…

第二十六章 BEV感知系列三(车道线感知)

前言 近期参与到了手写AI的车道线检测的学习中去&#xff0c;以此系列笔记记录学习与思考的全过程。车道线检测系列会持续更新&#xff0c;力求完整精炼&#xff0c;引人启示。所需前期知识&#xff0c;可以结合手写AI进行系统的学习。 BEV感知系列是对论文Delving into the De…

Jenkins项目部署

使用jenkins部署项目 简易版使用jenkins部署项目 将war包部署到tomcat中 将已有的war包部署到tomcat中(jenkins与tomcat在同一台主机) 点击Jenkins主页的新建任务 输入任务名称 选择构建一个自由风格的软件项目后点击确定 在构建内添加构建步骤&#xff0c;选择执行shell 输入…

回归预测 | Matlab实现MPA-BP海洋捕食者算法优化BP神经网络多变量回归预测(多指标、多图)

回归预测 | Matlab实现MPA-BP海洋捕食者算法优化BP神经网络多变量回归预测&#xff08;多指标、多图&#xff09; 目录 回归预测 | Matlab实现MPA-BP海洋捕食者算法优化BP神经网络多变量回归预测&#xff08;多指标、多图&#xff09;效果一览基本介绍程序设计参考资料 效果一览…