SolidityとReact/Reduxで掲示板を作成する

前回のサンプルアプリ作成ではReactとスマートコントラクトの連携をさせて匿名掲示板のサンプルアプリを作成しました。

SolidityとReactで掲示板を作成する

2018年5月22日

今回は加えてReduxという技術を利用してみました。

Reduxとは?

状態管理する専用の場所(ストア)で状態管理するようにすること。それによってReact側ではストアの内容を反映することに専念できるように。

実装するにあたってTruffle BoxesでReduxを用いたreact-box-web3-todo というプロジェクトがありましたのでそれを元に実装しています。

他にもいくつかReduxを用いているプロジェクトがありましたのでコードを追ってみたのですが上記のプロジェクトが一番基本としては良さそうでした。

サンプルアプリのコードから得られる知識

  • ERC721の利用方法
  • React.jsの基本
  • Reduxの基本
  • フロントエンドからのスマートコントラクトとの連携方法
  • Bulmaの利用方法

掲示板の仕様

 匿名掲示板への投稿と一覧表示のみできるシンプルな作りとなっています。

前回の記事と同じことが実現できるようにしています。

  • 掲示板への投稿
  • 掲示板の一覧表示 

 

動作環境

動作させた環境は以下になります。

  • React.js  v15.4.2
  • Bulma v0.7.1
  • yarn v1.6.0
  • solidity v0.4.23
  • redux v3.7.2
  • OpenZeppelin v1.9.0
  • truffle v4.1.7
  • Ganache v1.1.0

 

サンプルアプリの動作確認

動作方法

リポジトリをクローン

 

各ライブラリのインストール

 

コントラクトコードのコンパイルを実行

 

Ganache CLIを利用。ブロックチェーンをローカル環境に構築する。

 

コントラクトコードのマイグレートを実行

 

ローカルサーバを起動

 

トップ画面(http://localhost:3000)にアクセス。エラーが発生していないことを確認。

最後にGanache CLIで生成したプライベートネットワークのアカウントをMetaMaskで使えるようにします。

メニューを開いて「Custom RPC」を選択。

スクリーンショット 2018 06 02 17 14 40

 

RPCに「http://localhost:8545」を入力。ついでにCurrent ConversionでJPYを選択。

スクリーンショット 2018 06 02 17 23 01

 

プライベートネットワークに接続できるようになったので次はアカウントをインポート。

スクリーンショット 2018 06 02 17 24 16

 

ganache-cliコマンドで発行された秘密鍵(Private Keys)のどれか1つを入力。

スクリーンショット 2018 06 02 17 24 32

 

 IMPORTしたアカウントのETHの残高が表示されていればOKです!

 それでは次に動作を確認していきましょう。

動作確認

 ※前回の記事と違うのは今回は投稿時にMetaMaskを使うようにしています。

トップ画面にアクセスして投稿フォームにタイトルと本文を入力して投稿する

Truffle Box

MetaMaskからトランザクション発行のポップアップが表示されるのでSUBMITする

MetaMask Notification と Truffle Box

 

  

投稿後に投稿一覧に表示され、リロードしても表示されていればOK!

Truffle Box

 

動作が確認できましたので次は実装のポイントを見ていきます。

今回のサンプルではトランザクション発行時にSUBMITではなくREJECTでも投稿一覧に追加されてしまっています。

サンプルコードがReduxを活かしきれていないため、こうなっています。

実装のポイント 

Redux連携 

Actionの定義です。現在の状態(ストア)に対して行うイベントの定義を行っています。

src/actions/index.js

 

Reducerの定義。Actionの結果を現在の状態(ストア)に反映させます。

src/reducers/index.js

 

まとめ

今回サンプルアプリを作ってみましたが、あまりReduxを活かしきれていない感じがしています 。

そのため、Reactでの処理が増えてしまっています。具体的には投稿ID一覧を取得した後1つずつ投稿詳細データを取得する箇所ですね。

この辺りもう少し学習をしていきたいと思います。うまくやればもっと状態管理とコンポーネント内の処理を分離させることができそうです。

書籍も購入したのでもう少し基礎から学習してみることにしました。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで 

参考にした記事

たぶんこれが一番分かりやすいと思います React + Reduxのフロー図解 

 

2 件のコメント

  • はじめまして、こんにちは
    のっち と申します

    自分は、最近スマートコントラクトを勉強し始めたばかりの、プログラミング初心者です
    最近、ブロックチェーンという言葉をよく耳にするし、
    今後、勉強していても損にはならないだろうという漠然とした動機から
    オンラインスクールで勉強しているのですが、プログラミング初心者の自分には、
    わからないことが多いです 

    課題で掲示板用のコントラクトの作成をするのですが、
    どうやって組み立てていったらいいのか、何か参考になるものがないかと思い、検索していたところ、
    まつしんさんのブログにたどりつきました

    キャリアが全然違いますが、いろいろと参考にさせていただきたいと思います
    どうぞよろしくお願いします

    • 初めまして、まつしんです。のっちさんコメントありがとうございます!
      そうですねこれからDApps開発ができるプログラマの需要は間違いなく増えると見ています。
      まだできる人もそんなに多くないと思いますしね。
      頑張っていきましょうー!

  • matsushin へ返信する コメントをキャンセル

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です