Solidity

如何將 Drizzle 與 React 集成

  • June 5, 2019

我目前已經建立了一個帶有 react、redux 和 react-router 的松露項目。我剛剛寫完我的智能合約的第一個實現,現在想要 redux 連接智能合約。我嘗試閱讀了幾頁,包括: https ://truffleframework.com/docs/drizzle/getting-started/using-an-existing-redux-store

但是,我似乎無法弄清楚這一點。我現在已經按如下方式設置了我的商店:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/rootReducer';
import ItemList from "./utils/getItems";

//drizzle
import { generateContractsInitialState } from "drizzle";
import ItemOwnershipContract from "./contracts/ItemOwnership.json";


export default function configureStore() {
const options = {
   contracts: [
     ItemOwnershipContract
   ]
 }
const initialState = {
   contracts: generateContractsInitialState(options),
   account: "1",
   items: new ItemList().itemList,
   equipSelector: "0",
   raritySelector: "0",
   chosenItems: [-1, -1, -1]

}

const enhancers = applyMiddleware(thunk) && 
   (window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
return createStore(
   rootReducer,
   initialState,
    enhancers
);
}

(為縮進道歉)。

我現在如何執行以下操作:

  1. 從目前使用者那裡獲取帳戶地址?
  2. 我是否還需要使用 web3 來查看我是否與給定的區塊鏈有連接?
  3. 每當智能合約的內容更新時,這會自動更新商店嗎?還是我需要強制更新它?
  4. 在那篇文章中,他們只是在“./drizzleOptions”上呼叫 generateContractsInitialState(),但從未向我們顯示該文件。它會包含什麼?帶有contracts數組欄位的方式結構,並傳入一個json文件?
  5. drizzle 儲存我目前的帳戶地址,還是我需要使用 web3 來獲取它?

我知道這裡有很多問題,但是我對這些工具中的任何一個都不是很熟悉,所以我不太了解。先感謝您!

在查看此範常式式碼後,我能夠更好地理解 Drizzle。

該應用程序是使用 TruffleSuite 中的 Drizzle 盒子建構的。Drizzle 是一個“前端庫集合”,它允許在與乙太坊智能合約通信時輕鬆集成 React、Redux 和 Web3 功能。

https://github.com/tobyjaguar/TobyToken

我還建議查看 Truffle’s drizzle box,作為與 drizzle 集成的最新範例。

Drizzle 是在 Redux 中實現的狀態管理器,它將處理載入 web3 並將同步 web3 提供程序的目前選定地址。它還將通過自動掃描新探勘區塊中的合約更新交易來同步已註冊合約的合約狀態。

generateContractsInitialState當合約註冊到 Drizzle 時在內部呼叫,不應直接呼叫。

兩個資源供您考慮:

  1. 毛毛雨及其相關產品概述
  2. 使用毛毛雨箱的合約事件教程

引用自:https://ethereum.stackexchange.com/questions/68500