Dapp 前端工具: Drizzle Store
如果你最近一直在尝试用 React 和 Redux 构建 dapp 前端，估计你已经意识到不能只专注于 dapp 做什么，为了使用 web3 组件和合约实例，以及从区块链同步数据，这些事情上，你已经在配置上花了大量时间。现在我告诉你，你来对地方了，Drizzle 库正好是你现在所需要的。我们来看看它是怎么工作的，怎么用它来构建 dapp 前端。
什么是 drizzle store？它是怎么工作的？
drizzle store 的主要目的是提供一个可用的 redux store 版本，可以通过配置来管理所有与 web3 实例、合约实例、事件、交易和调用相关的事情。
使用 Drizzle Store ，你需要先建一个 drizzle 实例。
drizzle 实例负责保存以下属性：
- web3 实例
- 合约实例：包含 drizzle 合约实例的对象，用合约名称作为 key。
- 合约列表：drizzle 合约的数组
- Redux store
- 选项（Options）：用于配置 drizzle store
其中加粗的是在 React 组件中会用到的属性。
你需要为 drizzle 实例配置合适的选项，让 drizzle 按照你的想法管理存储和跟踪数据。这里[4]有可配置选项的完整列表和描述。
drizzle store 的状态
drizzle store 管理下面这些状态：
Drizzle state: source[5]
accounts / accountBalances：账户列表用web3.eth.getAccounts获取，相应余额用web3.eth.getBalance获取，在初始化 drizzle 过程中存储在 state 中。如果在选项中定义了账户拉取间隔，那么在达到间隔时间时，将会再次获取账户和其余额。
contracts ：用于存储事件和调用结果。如果一个新区块被广播，合约对象的synced属性会被设为 false，表示合约准备同步，当合约被同步后，synced属性设为 true(所有合约已经重新调用)
当初始化合约时，通过 web3 实例构建 ( new web3.eth.Contract()) 的合约对象会被修改，会在call和send方法的之上添加cacheCall和cacheSend方法。一旦这个过程完成，所有在选项中为合约指定的事件将被订阅，所有传入的事件将被添加到合约的事件属性下的 state 中。
调用的结果会被在使用cacheCall时获取的参数哈希索引。
currentBlock：最新的区块，由web3.eth.getBlock()生成的对象。
在 drizzle 初始化过程中，创建一个 saga 事件通道，通过web3.eth.subscribe('newBlockHeaders', (error, result)=>{})来监听每个新传入的区块，并将其保存在 state 中。如果把syncAlways选项设为 true，那么当接收到一个新区块时所有合约调用都会重新执行。如果syncAlways设为 fase，并且如果保存的任一合约与区块中现存的某个交易有关，那么所有相关合约的调用都会重新执行。
drizzleStatus ：包含 drizzle 状态信息的对象。这个对象唯一的属性就是initialized，这个属性会在初始化过程完成时被设为 true（初始化 web3 和合约，获取账户和对应的余额）。
transactions ：用于通过交易哈希 key 或者临时 key(交易哈希还不可用时)存储交易结果。在创建交易时，事件通道与通过[contractName].methods.[methodName]获取的交易对象关联，以便可以监听如“transactionHash”, “confirmation”, “receipt” 和 “error”的事件，然后创建一个临时 key 并保存在transactionStack中，这个临时 key 的索引会作为cacheSend方法的结果返回。
transactionStack ：用于存储交易 key。创建交易时，交易哈希还不可用，临时 key 会被 push 到这个交易堆栈，所以如果交易失败，用户可以通过这个临时 key 从 state 中的transactions对象得到错误信息。一旦交易哈希可用了，临时 key 就会被替代。
web3 ：包含 web3 实例状态的对象。如果可用则会获取networkId，如果用户钱包的网络没有在networkWhiteList选项中定义的，则networkMismatch会设为 true ，如果网络没有配置错误，那么这个属性不定义。
web3 可能有的状态：initializing , initialized 和 failed
当你创建一个 drizzle 实例的时候发生了什么？
当你第一次创建 drizzle 实例时，构造函数会如下开展：
- 首先为构造函数提供的选项会与默认选项合并，这意味着如果在默认选项中没有定义值，则会使用默认值默认选项如下：
web3: {
fallback: {
type: 'ws',
url: 'ws://127.0.0.1:8545'
}
},
contracts: [],
events: {},
polls: {
blocks: 3000
},
syncAlways: false,
networkWhitelist: []
- 一旦环境准备好了（在 web 浏览器的情况下，window 对象是可用的、可加载的），构造函数立即分配DRIZZLE_INITIALIZING启动初始化过程，如下图：
猜你喜欢
比特币价格今日行情，比特币暴跌7%其它加密货币也跳水
比特币价格今日行情，比特币暴跌7%其它加密货币也跳水 比特币价格大幅下跌，而以太币价格也下跌。
2022-01-22
09年上大学买了5000个比特币，不惜卖掉婚房的唐宇，现今咋样了
09年上大学买了5000个比特币，不惜卖掉婚房的唐宇，现今咋样了 2013年，那个为买118个比特币，不惜卖掉婚房的唐宇，现今咋样了
2022-01-22
中国全面禁止比特币挖矿的原因
中国全面禁止比特币挖矿的原因 近期因为国内碳排放问题和国内电力不够用的情况，先是把比特币挖矿关停，进而把虚拟货币的整个交易市场也几乎关停了。很多区块链的企业开始转向了海外，或者直接清算结束运行了。
2022-01-22
交易所出海后，比特币中国禁止后怎么提现
交易所出海后，比特币中国禁止后怎么提现 为什么要清退虚拟货币呢？
2022-01-22
李晨比特币5个亿爆仓怎么翻身
李晨比特币5个亿爆仓怎么翻身 李晨有多少比特币 李晨比特币爆仓 李晨炒比特币 比特币大涨李晨 李晨的比特币 Q1:李晨比特币5个亿爆仓怎么翻身
2022-01-22
上一篇
零知识证明 - Halo2电路构建源代码导读
下一篇
从零开发区块链应用(五)--golang网络请求
评论