当前位置: 首页 > news >正文

@reduxjs/toolkit配置react-redux解决createStore或将在未来被淘汰警告

通常 我们用redux都需要通过 createStore

但目前 你去用它 基本都会被划线 甚至有点厉害的的编辑器 他会直接告诉你这个东西基本快被弃用了
在这里插入图片描述
这个应该大家都知道 最好不要用已经被明确未来或弃用的语法 因为一旦弃用这个系统就需要维护 而且说 一般会被淘汰的语法 本身也就是有一定缺陷存在的

要用我这种方式redux react-redux的依赖肯定是要有的
要不然就手动引入一下

npm i --save redux react-redux

这里 我们先终端输入

npm i --save @reduxjs/toolkit

引入一下依赖
在这里插入图片描述
然后 我们在src目录下创建一个目录 叫 redux 在这个目录下创建一个store.js
这是我个人习惯的形式
然后在redux 目录下创建一个文件夹 叫 balanceSlice
下面创建一个 index.js
参考代码如下

import {createSlice} from "@reduxjs/toolkit";const balanceSlice = createSlice({name:"balance",initialState: {cont: 1},reducers: {setCont(state,action) {state.cont = action.payload}}
})export const { setCont } = balanceSlice.actions;export default balanceSlice.reducer;

这里 我们定义了一个全局变量cont 然后 编写了修改这个全局变量的函数 setCont
接受一个参数 用于修改 cont
然后 redux目录下的store.js 更改代码如下

import { configureStore } from "@reduxjs/toolkit";
import balanceReducer from "./balanceSlice";const store = configureStore({reducer: {balance: balanceReducer}
});export default store;

引入刚才写的balanceSlice 并完成配置

然后 我们在要用全局内容的组件引入处这样写
在这里插入图片描述
用 react-redux 下的 Provider组件包裹上
然后 store来源于我们自己写的 redux/store
然后 我们在需要用的组件中这样写

import React from 'react';
import { useSelector, useDispatch } from "react-redux";
import { setCont } from "../redux/balanceSlice";export default function Balance() {const state = useSelector((state) => state.balance.cont);const dispatch = useDispatch()return (<div>测试组件{state}<button onClick={()=>{dispatch(setCont(10))}}>修改一下</button></div>);
}

首先 我们导入useSelector, useDispatch
通过useSelector获取响应式中的 cont 赋值给state
然后 setCont函数 我们还是要从redux/balanceSlice/index上去拿

这个感觉不是特别灵活智能

然后 按一下 我们传10
根据我们写的逻辑 是直接赋值给cont

我们运行代码
在这里插入图片描述
可以看到 测试组件 后面 获取 cont 值的 state 的确是1 然后 我们按一下按钮
在这里插入图片描述
也是成功的修改为了10 做了响应式变更 非常的完美

http://www.lryc.cn/news/214551.html

相关文章:

  • 致敬1024天前的自己
  • 〖Python网络爬虫实战㊱〗- JavaScript 网站加密和混淆
  • 基于单片机设计的电子柜锁
  • Windows安装tensorflow-gpu=1.14.0CUDA=10.0cuDNN=7.4 (多版本CUDA共存)
  • CodeWhisperer 初体验
  • HNU-算法设计与分析-讨论课1
  • java连接zookeeper
  • 2023-11-01 node.js-electron-环境配置-记录
  • 使用 ElementUI 组件构建 Window 桌面应用探索与实践(WinForm)
  • 使用C++构建安全队列
  • EasyFlash移植使用- 关于单片机 BootLoader和APP均使用的情况
  • python捕获异常和scapy模块的利用
  • CSS+Javascript+Html日历控件
  • 让企业的数据用起来,数据中台=数据治理?
  • 【人工智能Ⅰ】5-粒子群算法
  • 软考高项-49个项目管理过程输入、输出和工具技术表
  • 《C和指针》(7)函数
  • vue3中的Props
  • ElasticSearch搜索技术深入与聚合查询实战
  • vue+element ui中的el-button自定义icon图标
  • PyQt5:构建目标检测算法GUI界面 (附python代码)
  • SV-10A-4G IP网络报警非可视终端 (4G版)
  • 对xml文本元素赋值
  • 【k8s】资源管理命令-陈述式
  • 无需频繁登录支付宝网站即可完成商家转账,实时到账,方便安全快捷
  • Vue 监听属性 watchEffect
  • 设计模式: 关于项目架构,技术选型,技术债务问题与解决方案
  • el-tabs 默认选中第一个
  • R -- match,pmatch,charmatch
  • 数据结构——线性表①(顺序表)