matsushinSolidityとReact/Reduxで掲示板を作成するツイートシェアはてブLINEPocket前回のサンプルアプリ作成ではReactとスマートコントラクトの連携をさせて匿名掲示板のサンプルアプリを作成しました。今回は加えてReduxという技術を利用してみました。Reduxとは?状態管理する専用の場所(ストア)で状態管理するようにすること。それによってReact側ではストアの内容を反映することに専念できるように。いうプロジェクトがありましたのでそれを元に実装しています。他にもいくつかReduxを用いているプロジェクトがありましたのでコードを追ってみたのですが上記のプロジェクトが一番基本としては良さそうでした。匿名掲示板への投稿と一覧表示のみできるシンプルな作りとなっています。前回の記事と同じことが実現できるようにしています。させた環境は以下になります。ブロックチェーンをローカル環境に構築する。startトップ画面(http://localhost:3000)にアクセス。エラーが発生していないことを確認。CLIで生成したプライベートネットワークのアカウントをMetaMaskで使えるようにします。RPCに「http://localhost:8545」を入力。ConversionでJPYを選択。プライベートネットワークに接続できるようになったので次はアカウントをインポート。Keys)のどれか1つを入力。記事と違うのは今回は投稿時にMetaMaskを使うようにしています。トップ画面にアクセスして投稿フォームにタイトルと本文を入力して投稿するMetaMaskからトランザクション発行のポップアップが表示されるのでSUBMITする投稿後に投稿一覧に表示され、リロードしても表示されていればOK!動作が確認できましたので次は実装のポイントを見ていきます。今回のサンプルではトランザクション発行時にSUBMITではなくREJECTでも投稿一覧に追加されてしまっています。サンプルコードがReduxを活かしきれていないため、こうなっています。実装のポイントRedux連携Actionの定義です。現在の状態(ストア)に対して行うイベントの定義を行っています。postContract});});};}...Reducerの定義。Actionの結果を現在の状態(ストア)に反映させます。post;まとめ今回サンプルアプリを作ってみましたが、あまりReduxを活かしきれていない感じがしています。そのため、Reactでの処理が増えてしまっています。具体的には投稿ID一覧を取得した後1つずつ投稿詳細データを取得する箇所ですね。この辺りもう少し学習をしていきたいと思います。うまくやればもっと状態管理とコンポーネント内の処理を分離させることができそうです。書籍も購入したのでもう少し基礎から学習してみることにしました。AM初めまして、まつしんです。ちさんコメントありがとうございます!そうですねこれからDApps開発ができるプログラマの需要は間違いなく増えると見ています。できる人もそんなに多くないと思いますしね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。新しい投稿をメールで受け取る【6/2の資産公開】再び下落。一方で6,7月は上がるという噂もSolidityとReactで掲示板を作成するRECOMMENDこちらの記事も人気です。Guild」に参加してや...Golang2019.5.10ecs-deployでECSにアプリをCIからデプロイする〜その1〜エンジニア2018.8.29【早割中!!】指導実績3000人以上の元学生プログラミング講師が作ったW...プロフィールまつしん(matsushin)プログラミング・仮想通貨・スポーツが好き。教師を目指していたが、IT業界は伸び続けると思いその道へ。新卒でSIer→Webプログラマ→リモートワーク普段はRailsでお仕事してます。