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了

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

相关推荐
记得开心一点嘛1 天前
Trellora:基于 Electron、React 和本地知识库的 AI 知识工作台
人工智能·react.js·electron
500841 天前
React Native for OpenHarmony 实战:三方库 react-native-url-polyfill 的鸿蒙化适配指南
javascript·react native·react.js·性能优化·electron·harmonyos
梦帮科技1 天前
【3.0修订版】创世与节点工程:genesis.json 与 node.toml 解剖
数据结构·算法·json·去中心化·区块链·智能合约·信任链
500841 天前
React Native for OpenHarmony 实战:三方库 react-native-volume-control 的鸿蒙化适配指南
javascript·react native·react.js·electron·harmonyos
薛一半1 天前
React-Redux三重优化实战揭秘
javascript·vue.js·react.js
怒放de生命20103 天前
【web3基础】区块链演化逻辑:从分布式账本到可编程世界
web3·区块链·分布式账本
薛一半3 天前
React-Redux核心原理与容器组件实战
前端·javascript·react.js
FungLeo3 天前
成为全栈·Next.js 网站前台篇·评论系统:叠楼、回复、删除与内容审核如何落到前台
react.js·内容审核·next.js·评论系统·树形数据·成为全栈
Alice-YUE3 天前
React 渲染机制速通:Render 树、Fiber 树与更新调度
前端·react.js·前端框架·react·fiber·前端性能·渲染机制
liangshanbo12154 天前
React Fiber:从“解决卡顿”到完整更新链路
前端·javascript·react.js