react使用npm i @reduxjs/toolkit react-redux

npm i @reduxjs/toolkit react-redux

创建一个 store文件夹,里面创建index.js文件和子模块文件夹
在这里插入图片描述
index,js文件写入以下代码

import {configureStore} from '@reduxjs/toolkit'
// 导入子模块
import counterReducer from './modules/one'
import two from './modules/two'
const store=configureStore({
    reducer:{
        counter:counterReducer,
        XFQ:two
    }
})
export default store

two文件子模块里创建模块文件,文件里写入以下代码

import { createSlice } from '@reduxjs/toolkit'
const countState = createSlice({
    name: 'count',
    // 初始化state
    initialState: {
        count: 0,
        name: '清',
        list: ''
    },
    // 修改数据的方法  这里面是同步的方法
    reducers: {
        // 增加
        inscrement(state) {
            state.count++
        },
        // 减少
        decrement(state) {
            state.count--
        },
        newName(state, value) {
            console.log('修改名称', value)
            state.name = value.payload
        },
        setList(state, value) {
            state.list = value.payload
        }
    }
})
// 解构出来 actionCreate函数
const { inscrement, decrement, newName, setList } = countState.actions
/**
 *
 *异步相当于  单独封装一个方法,然后这个方法调用同步里的某个函数方法

 注意: 异步方法要求 return 出去一个函数,而且 dispatch 是固定要写的,但是参数名自己随便定义
 *
 */
const YiBuFun = () => {
    // dispatch 这是个固定的形参,随便写啥,但是不能不写,可以写aa甚至bb
    return (aa) => {
        aa(setList('我是新数据'))
    }
}
// 获取 reducer
const reducer = countState.reducer
// 以按需导出的方式导出  inscrement,decrement
export { inscrement, decrement, newName,setList,YiBuFun }
// 以默认导出方式导出reducer
export default reducer

这段子模块仓库代码里面有同步方法(inscrement, decrement, newName)与异步方法(YiBuFun),

在入口文件那引入store

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

// 这里引入store文件
import store from './store/index.js'
import { Provider } from 'react-redux'

// ReactDOM.createRoot(document.getElementById('root')).render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
// )
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <Provider store={store}>
        <App />
    </Provider>
)

至此我们依旧创建好了仓库,并且仓库也和代码绑定了,接下来是使用仓库里的代码了

import { useState } from 'react'
import './index.css'
import { useSelector, useDispatch } from 'react-redux'
// 这是仓库里面以按需导出的几个方法,在仓库里可以看到
import { inscrement, decrement, newName,setList,YiBuFun } from '../../store/modules/two'

function App() {
    /***
     * count  子模块里的数据名称
     * name子模块里的数据名称
     * list 子模块里的数据名称
     * 
     * counter  store/index 里的子模块的名称
     * * */
    const { count, name,list } = useSelector(state => state.XFQ)

    const dispath = useDispatch()

    return (
        <div className='div1'>
            <div onClick={() => dispath(newName('传去的值'))}>{name}</div>
            <div>
                <button onClick={() => dispath(decrement())}>减少</button>
                {count}
                <button onClick={() => dispath(inscrement())}>增加</button>
            </div>
            <div>
                <div>list的参数值:{list}</div>
                <div>
                    <div onClick={()=>dispath(setList('我是新数据'))}>异步方法修改成:我是新数据</div>
                    <div onClick={()=>dispath(setList('我是同步'))}>同步方法修改成:我是同步</div>

                </div>
            </div>
        </div>

    )
}

export default App

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数字货币:未来金融的崭新篇章

一、数字货币是什么&#xff1f; 数字货币是一种基于区块链技术的货币&#xff0c;它通过去中心化的方式发行和交易&#xff0c;无需传统的金融机构参与。数字货币的交易过程公开透明&#xff0c;可以确保交易的真实性和不可篡改性。比特币、以太坊、瑞波币等是目前比较知名的…

vscode ssh远程服务器并通过代码程序以及terminal启动GUI

写在前面 之前在做带有GUI界面的程序一般都在MobaXterm类似得应用程序中实现&#xff0c;因为自带X Server,但是现在在代码中遇到Bug&#xff0c;需要在vscode中断点调试&#xff0c;但vscode不自带X server,导致没有到问题出就被卡在GUI这一步&#xff0c;这就带来了问题&…

SAP SD学习笔记05 - SD中的一括处理(集中处理),出荷和请求的冻结(替代实现承认功能)

上一章讲了SD的重要概念&#xff0c;比如出荷Plant&#xff08;交货工厂&#xff09;&#xff0c;出荷Point&#xff08;装运点&#xff09;&#xff0c;输送计划&#xff0c;品目的可用性检查&#xff0c;一括纳入/分割纳入&#xff0c;仓库管理等。 SAP SD学习笔记04 - 出荷…

记一次centos合并excel,word,png,pdf为一个整体pdf的入坑爬坑过程(一直显示宋体问题)。

一、背景 原先已经简单实现了excel,word,png,pdf合成一个整体pdf的过程。并将它弄到docker容器中。 1、原先入坑的技术栈 php:7.4 (业务有涉及)php第三方包 setasign\Fpdi\Fpdi : 2.3.6 &#xff08;pdf合并&#xff09;libreoffice : 5.3.6.1ImageMagick: 6.9.10-68 2、…

使用腾讯云服务器如何搭建网站?新手建站教程

使用腾讯云服务器搭建网站全流程&#xff0c;包括轻量应用服务器和云服务器CVM建站教程&#xff0c;轻量可以使用应用镜像一键建站&#xff0c;云服务器CVM可以通过安装宝塔面板的方式来搭建网站&#xff0c;腾讯云服务器网txyfwq.com整理使用腾讯云服务器建站教程&#xff0c;…

蓝桥杯(填空题)

十四届 B组 日期统计&#xff08;暴力枚举&#xff09; 数据 5 6 8 6 9 1 6 1 2 4 9 1 9 8 2 3 6 4 7 7 5 9 5 0 3 8 7 5 8 1 5 8 6 1 8 3 0 3 7 9 2 7 0 5 8 8 5 7 0 9 9 1 9 4 4 6 8 6 3 3 8 5 1 6 3 4 6 7 0 7 8 2 7 6 8 9 5 6 5 6 1 4 0 1 0 0 9 4 8 0 9 1 2 8 5 0 2 5 3…

【日常记录】【JS】js 实现元素平滑上升

文章目录 1、效果图2、基本骨架3、实现4、完整代码 1、效果图 2、基本骨架 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&…

VLC-Qt实现简单的视频播放器

VLC-Qt是一个结合了Qt应用程序和libVLC的免费开源库。它提供了用于媒体播放的核心类&#xff0c;以及用于快速开发媒体播放器的GUI类。由于集成了整个libVLC&#xff0c;VLC-Qt具备了libVLC的所有特性&#xff0c; 例如&#xff1a;libVLC实例和播放器、单个文件和列表播放、音…

模板方法模式:定义算法骨架的设计策略

在软件开发中&#xff0c;模板方法模式是一种行为型设计模式&#xff0c;它在父类中定义一个操作的算法框架&#xff0c;允许子类在不改变算法结构的情况下重定义算法的某些步骤。这种模式是基于继承的基本原则&#xff0c;通过抽象类达到代码复用的目的。本文将详细介绍模板方…

婆婆被一句“公积金都比你儿子高”整破防了

上一篇&#xff1a;腾讯员工&#xff1a;我年入百万&#xff0c;月供 6 千多&#xff0c;有娃 一个&#xff0c;媳妇大学老师&#xff0c;税后 1.5 万&#xff0c;想辞职躺平&#xff0c;靠媳妇养家&#xff0c;不知道可不可以 一位阿里巴巴集团的员工的家庭成员寻求建议&#…

MybatisPlus——常用注解

MybatisPlus——常用注解 MybatisPlus通过扫描实体类&#xff0c;并基于反射获取实体类信息作为数据库表信息 BaseMapper后的指向的是User实体类 package com.example.mybatisplus02.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.example.my…

RHCE实验2-DNS服务正反向解析

实验开始 一、DNS正向解析 注&#xff1a; server端&#xff1a;192.168.32.147 node端&#xff1a;192.168.32.141 网址&#xff1a;www.openlab.com 1、server端和node端都关闭安全软件&#xff08;以server端为例&#xff09; [rootserver ~]# setenforce 0 [rootser…

新手如何使用腾讯云服务器搭建网站?so easy~

使用腾讯云服务器搭建网站全流程&#xff0c;包括轻量应用服务器和云服务器CVM建站教程&#xff0c;轻量可以使用应用镜像一键建站&#xff0c;云服务器CVM可以通过安装宝塔面板的方式来搭建网站&#xff0c;腾讯云服务器网txyfwq.com整理使用腾讯云服务器建站教程&#xff0c;…

对给定向量旋转

对给定向量旋转 顺时针&#xff1a; 逆时针&#xff1a; 源码&#xff1a; QPointF rotateVector(const QPointF& dir, double angle, bool flag){double rad (angle * M_PI) / 180;QPointF res;if (flag){float x static_cast<float>(dir.x() * std::cos(rad) …

GRE/MGRE详解

GRE GRE&#xff1a;通用路由封装&#xff0c;是标准的三层隧道技术&#xff0c;是一种点对点的隧道技术&#xff1b; 该技术可以实现不同的网络之间安全的访问&#xff1b; 如上&#xff1a;可以使用该技术搭建一条专线&#xff0c;实现公司A与分公司A1之间相互通信&#xf…

7/8电源连接器航空插头端子

概述 7/8电源连接器是一种工业电源连接器的规格型号之一&#xff0c;常见于工业领域的电力传输和连接应用。它的名称中的“7/8”代表连接器插头的直径尺寸&#xff0c;通常为7/8英寸。这种类型的连接器通常用于较大电流传输和较高功率设备的连接&#xff0c;具有较大的电流承载…

在视频号开店,新手一定要注意了,这几个细节很多人都不知道

大家好&#xff0c;我是电商笨笨熊 视频号小店作为今年黑马项目&#xff0c;自是吸引力不少的电商玩家&#xff1b; 但是在这些玩家中不免有一些新手玩家&#xff0c;从未做过电商&#xff0c;或者做过其他平台的电商但是没有接触过视频号&#xff1b; 而视频号小店在某些地…

【央国企专场】——国家电网

国家电网目录 一、电网介绍1、核心业务2、电网组成 二、公司待遇三、公司招聘1、招聘平台2、考试安排2.3 考试内容 一、电网介绍 1、核心业务 国家电网公司&#xff08;State Grid Corporation of China&#xff0c;简称SGCC&#xff09;是中国最大的国有企业之一&#xff0c…

ORA-00600: internal error code, arguments: [krbcbp_9]

解决方案 1、清理过期 2、control_file_record_keep_time 修改 恢复时间窗口 RMAN (Recovery Manager) 是 Oracle 数据库的备份和恢复工具。在 RMAN 中&#xff0c;可以使用“恢复窗口”的概念来指定数据库可以恢复到的时间点。这个时间点是基于最近的完整备份或增量备份。 …

记录一次上传文件,file文件有,但是formData一直为空的问题

1&#xff0c;axios请求有两种方式&#xff0c;第一种 asiox.post(…) axios({ url: this.url, method: “POST”, … }) 然后我不管用什么东西获取文件&#xff0c;最后肯定是有一个file对象&#xff0c;咱们拿到file对象&#xff0c;进行如下操作 const formData new FormDa…