良い記事web3 は antd を使用して React dapp の注文コンポーネントの基本構造を構築しますついに基本的な注文コンポーネントをデモンストレーションしました。< /span>
次に、最初に環境のセットアップを続けます
ganache ターミナルを実行します
ganache -d
MetaMask にログインします
次に、プロジェクトを開いて契約を公開します
truffle migrate --reset
次に、テスト スクリプトを実行して ETH と grToken を取引所に転送し、2 つの注文を作成します。
truffle exec .\scripts\test.js
次に、dapp プロジェクトを実行します
OK、それでは始めましょう
グローバルな注文データを管理するには依然として redux を使用する必要があります
この方法では、インターフェースの更新を考慮する必要がなく、redux が処理します
ここでは、まず、ルート ディレクトリの src の下にある redux の下に、balanceSlice ディレクトリを見つけます。
次に、orderSlice.js を作成します。
参照コードは次のとおりです。続く
import {
createSlice, createAsyncThunk } from "@reduxjs/toolkit";;
const orderSlice = createSlice({
name:"order",
initialState: {
Cancelorders: [], //已经取消的订单
Fillorders: [], //已经完成的订单
Allorders: [] //全部的订单
},
reducers: {
setCancelorders(state,action) {
state.Cancelorders = action.payload
},
setFillorders(state,action) {
state.Fillorders = action.payload
},
setAllorders(state,action) {
state.Allorders = action.payload
}
}
})
export const {
setCancelorders, setFillorders, setAllorders } = orderSlice.actions;
export default orderSlice.reducer;
export const loadCancelorderData = createAsyncThunk(
"order/fetchCancelorderData",
async (data, {
dispatch}) => {
}
)
ここでは、データを 3 つのセット (キャンセルされたすべての注文、完了したすべての注文、すべての注文) に分割する Redux データ構造を単純に作成しました
。そして、それぞれに 3 つのセットを与えました。それぞれが対応する集合関数を記述しました
しかし、ここで 1 つの非同期関数を記述することはできません。多くの人は、最初に Cancelorders を取得し、次に Fillorders を取得し、最後に Allorders を取得するために非同期関数を記述すると考えるかもしれません。
これは次のとおりです。現在の開発の観点からは問題ありませんが、後でサブスクリプションとサブスクリプション解除の状況を考慮する必要があります
したがって、データの取得をまとめることができません
ここで最初にCancelorders のテストを作成します< a i=4> もちろん、ルート ディレクトリの src の下に redux の下にあるindex.js をインポートする必要があります。新しく作成した orderSlice をインポートしてから、 src の下のビューのindex.jsx コンポーネントでこの関数を使用します。ここでは、作成したloadCancelorderDataをインポートして呼び出します。loadCancelorderDataとloadBalanceDataは両方とも非同期ですが、実行の問題は、それらの間に関連性がないため、誰が最初に実行し、誰が後で実行するかはほとんど影響しません
次に、loadCancelorderData 関数に進みます。ここで最も重要なことは、取引所から契約を取得することです。
注文はすべて取引所にあるため
まず印刷しましょう。 コンソールを見てください
、この取引所の契約が利用可能であることがわかります
次に、取引所でコントラクトを開いて、注文の全体的な構造を確認します。これが、以前にストレージを作成した方法です。
しかし、ここでは、オブジェクトです。それを取得したいと考えています。対応するデータを取得するには、id
を渡す必要があります。その場合、最も基本的な解決策はそれを配列構造に変更することですが、当然のことですが、私はそれを行いません契約を途中まで書いた後で変更することを選択する
さて、ブロックチェーンはイベント情報を保存でき、改ざんできないと前に述べたことをまだ覚えておく必要があります。
前に書いた出来事を覚えていますか?注文の公開、注文のキャンセル、注文の実行時にイベントを記録します。これらのイベントの記録を直接取得できます。
ここでは、loadCancelorderData イベント コードを次のように直接変更します。
export const loadCancelorderData = createAsyncThunk(
"order/fetchCancelorderData",
async (data, {
dispatch}) => {
const {
Exchange
} = data;
const result = await Exchange.getPastEvents("Cancel", {
fromBlock:0,
toBlock: "latest"
})
console.log(result)
}
)
ここでは、getPastEvents という交換に伴うイベントを呼び出します。この関数は、コントラクトの前にチェーンに記録されたイベントを取得できます。
次に、イベント Cancel を取得します。以前は、注文キャンセルのイベントを記録するために契約書に書きました。
次に、2 つのパラメーター fromBlock は、0 番目のブロック (単に最新のブロック) が必要であることを示し、latest は最新のブロックが必要であることを示します< /span> 配列が正常に取得されたことがわかります。キャンセルされた注文のデータは 1 つしかないため コードを実行した後、コンソールを確認します。
次に、出力結果を出力します。
外部にある多くの情報はブロック情報です。実際、実際の注文に対して書き込む情報は returnValues にあります。
各注文データには returnValue があります。これを書き込みます。フィールド
フィルタリングして除外できます
このように記述することもできます
、または配列に編成することもできますが、必要なのは returnValues フィールドだけです。
実行結果は次のとおりです。
データが取得されたので、dispatch を呼び出し、指定された set 関数を呼び出して対応するデータに書き戻します。
その後、すべてが同じになります. ここでは、次のように別のイベント参照コードを記述します。
export const loadAllrderData = createAsyncThunk(
"order/fetchAlorderData",
async (data, {
dispatch}) => {
const {
Exchange
} = data;
const result = await Exchange.getPastEvents("Order", {
fromBlock:0,
toBlock: "latest"
})
const Allorders = result.map(item=>item.returnValues)
dispatch(setAllorders(Allorders))
}
)
この形式は、キャンセルされた注文データを取得するために作成した形式と基本的に同じです。
ここでは名前を変更し、イベント Order と呼んでいるだけです。< a i =2> これは、作成された注文を記録し、データを取得してデータを書き戻すために以前の契約を使用したものです
その後、注文を完了するためのクエリはまったく同じになります。
export const loadFillorderData = createAsyncThunk(
"order/fetchFillorderData",
async (data, {
dispatch}) => {
const {
Exchange
} = data;
const result = await Exchange.getPastEvents("Fill", {
fromBlock:0,
toBlock: "latest"
})
const Fillorders = result.map(item=>item.returnValues)
dispatch(setFillorders(Fillorders))
}
)
ここで、名前を変更します。次に、ここで呼び出したいのは「Fill」です。契約定義は、注文を満たすイベントを記録するために使用されました。
最後に、データを取得します。そしてそれを書きます。
書き込み後、src ディレクトリの view ディレクトリにあるindex.jsx に移動し、他の 2 つのイベントを一緒にインポートして呼び出します。
次にコードを実行すると、データは次のようになります。
しかし、コンソールは警告を報告します
良い男はまだ非常に怖い満山紅
実際、この問題は注文が非シリアル化データであるためであり、redux で発生する問題です。
ここでは、データが入力されており、ストレージ形式が予想どおりであることが明確にわかります。
彼女の警告は、あなたのデータがシリアル化されていないことを意味します。仕様を満たしており、将来何か問題が発生しても、フレームワークのせいにしないでください
公開されたくない場合は、redux でデータのチェックを直接オフにすることができます。
src ディレクトリの下の redux ディレクトリにあるindex.js を見つけて、そのような設定をconfigureStore に追加します。
middleware:getDefaultMiddleware => getDefaultMiddleware({
serializableCheck:false
})
データのチェックをオフにします
それからコンソールを再度実行すると、コンソールはきれいになります
さて、注文データを取得します < /span>