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

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

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

2018年5月22日

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

Reduxとは？

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

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

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

Contents

1 サンプルアプリのコードから得られる知識
2 掲示板の仕様
3 動作環境
4 サンプルアプリの動作確認
- 4.1 動作方法
- 4.2 動作確認
5 実装のポイント
- 5.1 Redux連携
6 まとめ
7 参考にした記事

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

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

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

動作方法

リポジトリをクローン

$ git clone git@github.com:Matsushin/dapps-react-redux-bbs.git

1	$ git clone git@github.com:Matsushin/dapps-react-redux-bbs.git

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

$ yarn install

1	$ yarn install

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

$ truffle compile

1	$ truffle compile

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

$ ganache-cli -b 3
Ganache CLI v6.1.0 (ganache-core: 2.1.0)

Available Accounts
==================
(0) 0x0a29e95d2deeccd037fce71a0046ddb21697d129
(1) 0xff1e712b8770c5d4c6d3a6c8d48193fa0dff71da
(2) 0xbabdd96ea125d69892605235c2955a6b618b6670
(3) 0x42d80337b1dc7228a6ba90ad8ec7981dcb06ce62
(4) 0xa5dc85807cdb11fe039a408dc63550dbf4d19372
(5) 0x1e2f30e47589957bd87f94562e6569860f47b6d3
(6) 0x169e9286c770742db6575e123275ab53c171fb57
(7) 0x55a772d4ae0d89ec5c61ce30ec678cb1a8b7e1cf
(8) 0x3dd9953245333e875cf04fbf5ae32bfd2c04ec71
(9) 0x967e6ebe4dda482cb7d621220ea407b0dfd84cf2

Private Keys
==================
(0) 0c0855e20342ea59bdddb756749751ba51ba79af8d0b3d36a62aa2fcafc2ef73
(1) c6b1a374958ed9e0a0a192a707ec9e6f0c5558188eca988159c6572b3850e087
(2) debcccf56e96eb2271b9407c98409260f7733082286f02a811ca46bf5492cbc9
(3) d805aa5308c1f3ddadf3ad1ac8bd90675b830027b7f4bf8dc826333a1fa096f4
(4) 27041cae67616e7606d9fe5db0053f755bdfa6ff5326bbca313e4a898ad22ce6
(5) ee5980735d2397b0f8c42350e538d21a3059310961d3c7d2579394e1297d62dd
(6) 4d742534aa60ea27d46c23147be1fbac3a810941c957d4a40afaa23467cc4edf
(7) 8d082c4820fc7011ef7a8d518e5893a54ea584df03cfc1278e60e9e30a516eb1
(8) 3ebcb0020161e541effb79f7c0a698e33e8a3aa20c511d56c58900ccee8e75d7
(9) 6a1069a675bb4f8c1c468cc6d3fccb07d0a51b48e0e7f50315d8e29f9e1dff25

$ ganache-cli -b 3

Ganache CLI v6.1.0 (ganache-core: 2.1.0)

Available Accounts

==================

(0) 0x0a29e95d2deeccd037fce71a0046ddb21697d129

(1) 0xff1e712b8770c5d4c6d3a6c8d48193fa0dff71da

(2) 0xbabdd96ea125d69892605235c2955a6b618b6670

(3) 0x42d80337b1dc7228a6ba90ad8ec7981dcb06ce62

(4) 0xa5dc85807cdb11fe039a408dc63550dbf4d19372

(5) 0x1e2f30e47589957bd87f94562e6569860f47b6d3

(6) 0x169e9286c770742db6575e123275ab53c171fb57

(7) 0x55a772d4ae0d89ec5c61ce30ec678cb1a8b7e1cf

(8) 0x3dd9953245333e875cf04fbf5ae32bfd2c04ec71

(9) 0x967e6ebe4dda482cb7d621220ea407b0dfd84cf2

Private Keys

==================

(0) 0c0855e20342ea59bdddb756749751ba51ba79af8d0b3d36a62aa2fcafc2ef73

(1) c6b1a374958ed9e0a0a192a707ec9e6f0c5558188eca988159c6572b3850e087

(2) debcccf56e96eb2271b9407c98409260f7733082286f02a811ca46bf5492cbc9

(3) d805aa5308c1f3ddadf3ad1ac8bd90675b830027b7f4bf8dc826333a1fa096f4

(4) 27041cae67616e7606d9fe5db0053f755bdfa6ff5326bbca313e4a898ad22ce6

(5) ee5980735d2397b0f8c42350e538d21a3059310961d3c7d2579394e1297d62dd

(6) 4d742534aa60ea27d46c23147be1fbac3a810941c957d4a40afaa23467cc4edf

(7) 8d082c4820fc7011ef7a8d518e5893a54ea584df03cfc1278e60e9e30a516eb1

(8) 3ebcb0020161e541effb79f7c0a698e33e8a3aa20c511d56c58900ccee8e75d7

(9) 6a1069a675bb4f8c1c468cc6d3fccb07d0a51b48e0e7f50315d8e29f9e1dff25

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

$ truffle migrate

1	$ truffle migrate

ローカルサーバを起動

$ yarn start

1	$ yarn start

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

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

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

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

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

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

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

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

動作確認

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

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

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

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

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

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

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

実装のポイント

Redux連携

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

src/actions/index.js

import Web3 from 'web3';
import contract from 'truffle-contract';
import PostTokenContract from '../..//build/contracts/PostToken.json';
export const WEB3_CONNECTED = 'WEB3_CONNECTED';
export const WEB3_DISCONNECTED = 'WEB3_DISCONNECTED';
export const POST_CONTRACT_INSTANTIATED = 'POST_CONTRACT_INSTANTIATED';
export const POSTS_FETCHED = 'POSTS_FETCHED';
export const POST_FETCHED = 'POST_FETCHED';
export const POST_ADDED = 'POST_ADDED';

export const defaultState = {
  web3: null,
  postIds: []
};

export function web3connect() {
  return (dispatch) => {
    const web3 = window.web3;

    // Checking if Web3 has been injected by the browser (Mist/MetaMask)
    if (typeof web3 !== 'undefined') {
      // Use Mist/MetaMask's provider.
      dispatch({
        type: WEB3_CONNECTED,
        payload: new Web3(web3.currentProvider)
      });
    } else {
      dispatch({
        type: WEB3_CONNECTED,
        payload: new Web3(new Web3.providers.HttpProvider('http://localhost:8545'))
      });
    }
  };
}

export function instantiatePostContract() {
  return (dispatch, getState) => {
    co<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="EUC-JP" />
<title>500 Internal Server Error</title>
<meta name="copyright" content="Copyright XSERVER Inc.">
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
img {
    border: 0;
}
ul {
    padding-left: 2em;
}
html {
    overflow-y: scroll;
    background: #3b79b7;
}
body {
    font-family: "�ᥤ�ꥪ", Meiryo, "�ͣ� �Х����å�", "MS PGothic", "�ҥ饮�γѥ� Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    margin: 0;
    line-height: 1.4;
    font-size: 75%;
    text-align: center;
    color: white;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
h1 {
    font-weight: bold;
    line-height: 1;
    padding-bottom: 20px;
    font-family: Helvetica, sans-serif;
}
h2 {
    text-align: center;
    font-weight: bold;
    font-size: 27px;
}
p {
    text-align: center;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: white;
}
.explain {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    line-height: 1.5;
    margin: 30px auto;
    padding: 17px;
}
#cause {
    text-align: left;
}
#cause li {
    color: #666;
}
h3 {
    letter-spacing: 1px;
    font-weight: bold;
    padding: 0;
}
#white_box {
    margin: 15px auto 0;
    background-color: white;
}

/* ====================

  ���ޡ��ȥե���

======================= */
@media only screen and (min-width: 0) and (max-width: 767px) {
	#base {
		padding: 30px 10px;
	}
	h1 {
		font-size: 26px;
	}
	h1 span {
		font-size: 60px;
	}
	h2 {
		font-size: 16px;
	}
	.explain {
		font-size: 14px;
	}
	h3 {
		margin-top: 45px;
		font-size: 16px;
	}
	#cause {
		padding: 20px;
		font-size: 12px;
	}
}

/* ====================

   �ѥ���������֥�å�

======================= */

@media only screen and (min-width: 768px) {
	#base {
		margin-top: 80px;
	}
	h1 {
		font-size: 50px;
	}
	h1 span {
		font-size: 110px;
	}
	.explain {
		font-size: 16px;
		width: 660px;
	}
	#white_box {
		width: 680px;
		margin-bottom: 50px;
	}
	h3 {
		font-size: 20px;
		margin-top: 80px;
	}
	#cause {
		padding: 30px;
		font-size: 14px;
	}
}
</style>
</head>

<body>
<div id="base">
    <h1><span>500</span><br />
        Internal Server Error</h1>
    <h2>�����������褦�Ȥ����ڡ�����ɽ���Ǥ��ޤ���Ǥ�����</h2>
    <p class="explain">CGI��PHP�ʤ��������Ȥˤ����륨�顼�ΰ١�<br />
��Ū�Υڡ�����ɽ���Ǥ��ʤ��ä����Ȥ��̣���ޤ���</p>
    <h3>�ʲ��Τ褦�ʸ������ͤ����ޤ���</h3>
    <div id="white_box">
        <div id="cause">
            <ul>
                <li style="margin-bottom: 15px"><strong>��³Ū��ȯ�������硧</strong><br />
CGI����٤��礭����CGI�ץ�������¿��ư��Ƥ���ˡ�</li>
                <li><strong>���ȯ�������硧</strong><br />
CGI�Υѡ��ߥå��������˸��꤬���롣 / CGI�Υ����������ɤ����꤬���롣/  .htaccess �ε��Ҥ˸��꤬���롣</li>
            </ul>
        </div>
    </div>
    <!--//base--></div>
</body>
</html>