Rails+React with webpacker データベースをReactでいじる

前回まででReactをRailsで使う環境は整いました.

でも, Reactでデータベースの値をどうやって参照すればいいのかつまづいたのでメモしておきます.

 

 

ルーティングとコントローラ設定, axiosでReactと通信

webpackerのファイルの構成は割愛します. 自分は app -> javascript 配下に

  • packs : webpackerのデフォルトのエントリポイント
  • javascripts : Reactのコンポーネント( jsx )
  • stylesheets : css

のような感じで置きました.

そして docker-compose run --rm web rails g controller home でhomeコントローラ作成しました.

そして, app/config/routes.rb を以下のように設定.

Rails.application.routes.draw do
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
root 'home#index'
get 'axios_get' => 'home#getting'
end

こうすることで, Reactコンポーネントからaxiosで /axios_get にアクセスするとhomeコントローラのgettingメソッドが呼ばれる. なのでgettingメソッドのから値を返してやれば良い. homeコントローラは以下.

class HomeController < ApplicationController

def index
@todos = Todo.all
# app/viwes/home/index.html.erbを表示.
# だけど今後は表示を全てReactコンポーネント化する予定なので不要.
render template: 'home/index', layout: 'application'
end

def getting
@todos = Todo.all
render json: @todos, layout:'application'
end

end

ここではTodoというモデル(todosテーブル)を作ってデータベースの値を引っ張ってきています. で, 返り値はjson形式です. 

(一応layout指定してますが, 無くても勝手に読んでくれる???)

 

最後にReact側で

import React from 'react';
import axios from 'axios';

class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.hundleClick = this.hundleClick.bind(this);
}

hundleClick() {
let num = this.state.count + 1;
this.setState({count: num});

axios.get('axios_get')
.then(response => {
console.log(response.data);
})
.catch(err => {
console.log(err);
});
}

render() {
return(
<div>
<p className="MyApp-count">Count : {this.state.count}</p>
<button type="button" className="btn btn-primary" onClick= {this.hundleClick}>Button!</button>
</div>
);
}

}

export default MyApp;

みたいに書けばコンソールのログにデータベースの値がJSONで入ってます.

 

※ 初歩的ですが, Reactのクラス名は大文字英字で始めないとエラーになります(一回やった笑)

 

これから

次はデータの取り扱い方を詳しく見ていこうかなと. あとpostもしようかなと.