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

2024-04-13 17:52

本文主要是介绍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',// 初始化stateinitialState: {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甚至bbreturn (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

这篇关于react使用npm i @reduxjs/toolkit react-redux的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/900818

相关文章

Java Lambda表达式的使用详解

《JavaLambda表达式的使用详解》:本文主要介绍JavaLambda表达式的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、前言二、Lambda表达式概述1. 什么是Lambda表达式?三、Lambda表达式的语法规则1. 无参数的Lambda表

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

详解如何使用Python构建从数据到文档的自动化工作流

《详解如何使用Python构建从数据到文档的自动化工作流》这篇文章将通过真实工作场景拆解,为大家展示如何用Python构建自动化工作流,让工具代替人力完成这些数字苦力活,感兴趣的小伙伴可以跟随小编一起... 目录一、Excel处理:从数据搬运工到智能分析师二、PDF处理:文档工厂的智能生产线三、邮件自动化:

Spring @RequestMapping 注解及使用技巧详解

《Spring@RequestMapping注解及使用技巧详解》@RequestMapping是SpringMVC中定义请求映射规则的核心注解,用于将HTTP请求映射到Controller处理方法... 目录一、核心作用二、关键参数说明三、快捷组合注解四、动态路径参数(@PathVariable)五、匹配请

Java 枚举的基本使用方法及实际使用场景

《Java枚举的基本使用方法及实际使用场景》枚举是Java中一种特殊的类,用于定义一组固定的常量,枚举类型提供了更好的类型安全性和可读性,适用于需要定义一组有限且固定的值的场景,本文给大家介绍Jav... 目录一、什么是枚举?二、枚举的基本使用方法定义枚举三、实际使用场景代替常量状态机四、更多用法1.实现接

springboot项目中使用JOSN解析库的方法

《springboot项目中使用JOSN解析库的方法》JSON,全程是JavaScriptObjectNotation,是一种轻量级的数据交换格式,本文给大家介绍springboot项目中使用JOSN... 目录一、jsON解析简介二、Spring Boot项目中使用JSON解析1、pom.XML文件引入依

Java中的record使用详解

《Java中的record使用详解》record是Java14引入的一种新语法(在Java16中成为正式功能),用于定义不可变的数据类,这篇文章给大家介绍Java中的record相关知识,感兴趣的朋友... 目录1. 什么是 record?2. 基本语法3. record 的核心特性4. 使用场景5. 自定

Python使用Tkinter打造一个完整的桌面应用

《Python使用Tkinter打造一个完整的桌面应用》在Python生态中,Tkinter就像一把瑞士军刀,它没有花哨的特效,却能快速搭建出实用的图形界面,作为Python自带的标准库,无需安装即可... 目录一、界面搭建:像搭积木一样组合控件二、菜单系统:给应用装上“控制中枢”三、事件驱动:让界面“活”

C/C++ chrono简单使用场景示例详解

《C/C++chrono简单使用场景示例详解》:本文主要介绍C/C++chrono简单使用场景示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录chrono使用场景举例1 输出格式化字符串chrono使用场景China编程举例1 输出格式化字符串示

Python验证码识别方式(使用pytesseract库)

《Python验证码识别方式(使用pytesseract库)》:本文主要介绍Python验证码识别方式(使用pytesseract库),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全... 目录1、安装Tesseract-OCR2、在python中使用3、本地图片识别4、结合playwrigh