Drizzle Logo

 Drizzle 快速开始

Drizzle 是一个前端库的集合, 方便编写dapp前端内容. Drizzle 核心是基于 Redux 商店的, 所以你可以使用 Redux 上面的任何内容. 让我们更专注于同步智能合约数据, 交易数据等. 因为只需定义需要同步的内容即可, 所以一切仍然高效.

  • 响应智能合约的状态, 事件和交易.
  • 基于定义, 无需在无用的数据维护上浪费时间
  • 仍然可以访问底层接口功能. Web3和智能合约中的方法仍然可以直接访问.

 安装

使用 npm 安装 Drizzle:

npm install --save drizzle

使用 yarn 安装 Drizzle:

yarn add drizzle

使用 React?: 启用 Drizzle 最方便的方法是 官方 drizzle-react 和 (可选的) drizzle-react-components 插件.

 初始化

注意: Drizzle 使用 web3 1.0 和 web sockets, 确保您的环境支持. 作为区块链开发环境需要安装 ganache-cli v6.1.0+, geth 或者 parity. 暂时不能使用 MetaMask (关注此处查看问题近况).

  1. 引入包
import { Drizzle, generateStore } from 'drizzle'
  1. 创建一个 options 对象, 配置需要的智能合约, 以便 Drizzle 自动初始化. 其他 option 支持的内容, 参考 Options 配置.
// 导入智能合约
import SimpleStorage from './../build/contracts/SimpleStorage.json';
import TutorialToken from './../build/contracts/TutorialToken.json';

const options = {
 contracts: [
   SimpleStorage
 ]
};

const drizzleStore = generateStore(this.props.options);
const drizzle = new Drizzle(this.props.options, drizzleStore);

 合约注入

Drizzle 在web3.Contract内提供了与数据仓库同步call和交易的方法.

 cacheCall()

获取合约数据. 在一个合约中调用 cacheCall() 方法, 执行该定义的方法后, 返回一个key, 用于从数据仓库中取数据. 当新的接收到新区块时, _当_ 任何交易涉及到我们的合约时, Drizzle 会自动刷新数据仓库. 更多细节信息参考: 数据是如何保持最新的.

注意: 我们需要在获取数据前判断 Drizzle 是否已经初始化, 例如下面用来获取一条数据的用法. 开发更大的dapp, 更好的方法是使用 加载插件. 我们同时也已经生成了一个 drizzle-react-components 可以直接使用.

// 声明我们正在监听数据仓库的变化.
var state = drizzle.store.getState();

// 如果 Drizzle 已经被实例化(所以web3, accounts 和 contracts也已经实例化), 继续执行
if (state.drizzleStatus.initialized) {
    // 声明这个 call 需要被缓存并且保持数据同步, 该方法返回用于重新访问数据仓库的key.
    const dataKey = drizzle.contracts.SimpleStorage.methods.storedData.cacheCall();

    // 使用 dataKey 获取仓库内数据
    return state.contracts.SimpleStorage.methods.storedData[dataKey].value;
}

// 如果 Drizzle 还未未实例化, 展示一些加载信息.
return 'Loading...'

合约实例包含全部的 web3 属性和方法. 例如, 在你不需要从store中获取内容时, 仍然可以一如既往的调用:

drizzle.contracts.SimpleStorage.methods.storedData().call();

 cacheSend()

发出一个交易. 在一个合约中调用 cacheSend() 方法, 将会发出一个交易, 并且返回该交易的 hash 值, 以便于从数据仓库中获取交易状态. 最后一个参数可选, 用于设置 from, gas, gasPrice 等信息. Drizzle 将会向数据仓库更新交易状态(pending 交易中, success 交易成功, error 交易失败), 并且存储交易收据. 想要了解更多详细信息, 参考 数据是如何保持最新的.

注意: 我们需要在获取数据前判断 Drizzle 是否已经初始化, 例如下面用来获取一条数据的用法. 开发更大的dapp, 更好的方法是使用 加载插件. 我们同时也已经生成了一个 drizzle-react-components 可以直接使用.

// 声明我们正在监听数据仓库的变化.
var state = drizzle.store.getState();

// 如果 Drizzle 已经被实例化(所以web3, accounts 和 contracts也已经实例化), 继续执行
if (state.drizzleStatus.initialized) {
    // 声明此交易正在正在被监听, 我们获取交易的引用 stackId
    const stackId = drizzle.contracts.SimpleStorage.methods.set.cacheSend(2, {from: '0x3f...'});

    // 使用 dataKey 展示交易状态
    if (state.transactionStack[stackId]) {
        const txHash = state.transactionStack[stackId];

        return state.transactions[txHash].status;
    }
}

// 如果 Drizzle 还未未实例化, 展示一些加载信息.
return 'Loading...';

想要了解更多关于交易状态的信息, 参考 Drizzle 状态.

合约实例包含全部的 web3 属性和方法. 例如, 在你不需要使用store中的tx时, 仍然可以一如既往的调用:

drizzle.contracts.SimpleStorage.methods.set(2).send({from: '0x3f...'});

 Options 参数

{
  contracts,
  events: {
    contractName: [
      eventName
    ]
  },
  web3: {
    fallback: {
      type
      url
    }
  }
}

 contracts (array数组, required必须)

智能合约文件的数组列表

 events (object)

事件对象, key与合约名对应, value值为数据仓库监听事件名的数组,

 web3 (object)

web3 实例化配置参数

 fallback (object)

由web3实例化的连接类型和连接地址组成的对象, 当没有检测到注入连接(MetaMask或者Mist)的时候会使用.

type (string): web3 回调对象, 默认 ws (web socket) , 当前也只支持 ws.

url (string): 完整的 websocket url 地址. 例如: ws://127.0.0.1:8546.

 数据是如何保持最新的

  1. 实例化后, Drizzle 初始化 web3 和智能合约, 然后通过订阅新区快的区块头来监听区块链的变动.

    Drizzle Sync Step 1

  2. Drizzle 关注合约的调用来知晓应该同步哪些数据.

    Drizzle Sync Step 2

  3. 当区块链产生新的区块时(区块头的hash会与原来的不同), Drizzle 判断此区块同步完成后, 自动排查新区快中的所有交易, 判断是否有与当前智能合约相关的内容.

    Drizzle Sync Step 3

  4. 如果有相关内容, 重新执行数据仓库中的过程刷新可能的更新. 如果没有相关内容, 继续使用原来数据仓库中的缓存数据.

    Drizzle Sync Step 4