web3 在React dapp中全局管理web3当前登录用户/智能合约等信息

上文 Web3 React项目Dapp获取智能合约对象我们在自己的前端dapp项目中链接获取到了 自己的智能合约

我们继续

我们还是先启动ganache环境 终端输入

javascript 复制代码
ganache -d

然后发布一下我们的智能合约 打开我们的合约项目 终端输入

javascript 复制代码
truffle migrate --reset

这样 我们的智能合约就部署到区块链上了

然后 我们启动项目 打开浏览器控制台 一切正常 OK

然后 这里 我们对函数做一点变动

我们将所有 从 获取web3当前授权用户 到 获取两个区块链中合约的代码都写到initialization中 然后 将整个web3信息对象返回回来

然后 我们要整理它 让所有组件都能够随时拿到这个信息来使用

那么 这个时候 大家能想到的也肯定是 redux 了

但是 redux对非序列化的数据存储 不是那么完善

我们这种非序列化的结构数据 是无法通过redux中间件的序列化检查的 当然可以关闭中间件 让它运行起来 但也可能引发一些小问题

其实 我们这里 完全可以用一种最简单的方式 那就是直接挂window对象上面

javascript 复制代码
window.WebData = WebData;

这样 我们项目后面要用web3 的信息 去window对象上拿就ok了

啊 有点虎头蛇尾 不过这确实是最直接的方式

相关推荐
阿黎梨梨2 小时前
从“能用”到“好维护”:React + TypeScript 实战指南
react.js
无人生还2 小时前
从 Vue3 到 React · 快速上手系列第 11 篇:状态管理
前端·vue.js·react.js
GuWenyue2 小时前
90%前端写React TS都踩坑!一套父子组件+Hooks完整实战,彻底搞懂类型约束
前端·react.js
张元清2 小时前
React useMeasure Hook:用 ResizeObserver 测量 DOM 元素 (2026)
javascript·react.js
朝阳394 小时前
react19【实战】配置化路由登录鉴权完整方案
前端·javascript·react.js
名字还没想好☜4 小时前
React 用 IntersectionObserver 实现图片懒加载与无限滚动:封装一个 useInView Hook
前端·javascript·vue.js·react.js·react
朝阳395 小时前
react19【系列实用教程】setSearchParams
react.js
张元清21 小时前
React useDisclosure Hook:管理模态框和抽屉的打开关闭状态 (2026)
javascript·react.js
学高数就犯困21 小时前
React:常见的性能优化手段
前端·react.js
濮水大叔21 小时前
为什么 AI 最擅长 React/Next.js,却很少看到真正好用的 Next.js 开源项目?
react.js·node.js·next.js