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了

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

相关推荐
Shinner欣儿10 小时前
React18 和 19 新特性结合看
前端·react.js
光影少年12 小时前
react navite环境与工程化
前端·react native·react.js
用户2986985301413 小时前
使用 JavaScript 在 React 中实现 Word 转 PDF
前端·javascript·react.js
专业抄代码选手17 小时前
01|从手写 DOM 到虚拟 DOM:把 UI 从“操作”变成“描述”
前端·javascript·react.js
专业抄代码选手18 小时前
03|React 为什么需要协调:比较两棵树,而不是重建页面
前端·javascript·react.js
YIAN18 小时前
告别等后端!React+Vite 前端独立开发全流程:接口封装 + Mock 方案 + 状态管理
前端·react.js·vite
werdedeage18 小时前
用 useReducer 管理多参考图生成器的前端状态
react.js·typescript
circuitsosk18 小时前
智能体任务拆解与执行:基于ReAct+Plan-and-Execute框架的行业Skill构建实录
前端·javascript·python·react.js·react·llm agent·智能体编排
网安蟹佬霸19 小时前
WebAssembly安全攻防实战:从WASM逆向到漏洞利用
前端·安全·自动化·区块链·智能合约·wasm