BETA

React | axiosでRailsAPI + deviseのapiを叩いてみる

投稿日:2020-03-29
最終更新:2020-03-30

前提

バックエンドをRialsのAPIモードで作成し、ポート3001で起動

フロントエンドをReactで作成し、ポート3000で起動

ReduxのactionCreatorでaxiosを使った非同期処理を行い

ユーザー登録を行ってみる

deviseのインストールとCORSの設定

まず、APIモードでRailsプロジェクトを作成

$ bundle exec rails new . -d mysql --api  

CORSを可能にするため、rack-corsをインストール

gem 'rack-cors'  

cors.rbのコメントアウトを外し、originsにクライアントのホストを記述

また、CORSだとクッキーの送受信は許可されていませんが、それを可能とするためcredentials: trueと追記

Rails.application.config.middleware.insert_before 0, Rack::Cors do  
  allow do  
    origins 'http://localhost:3000'  

    resource '*',  
      headers: :any,  
      methods: [:get, :post, :put, :patch, :delete, :options, :head],  
      credentials: true  
  end  
end  

データベースを作成

default: &default  
  adapter: mysql2  
  - encoding: utf8mb4  
  + encoding: utf8  
  // utf8mb4だと後述のmigrateの際エラーが出るのでutf8に変更  
  // 詳しくは別記事にでもしようと思います  
  .  
  .  
$ bin/rails db:create  
$ bin/rails g devise:install  
$ bin/rails g devise User  
$ bin/rails db:migrate  

とりあえず、ユーザー登録を行って見ようと思うので、
routeを確認しておきます。

$ bin/rails routes  
POST /users(:format) devise/registrations#create  

POSTで/usersを叩けば大丈夫そうですね。

Reactプロジェクトの作成

$ create-react-app app/frontend  

必要なmoduleをインストールしておきます

$ yarn add redux react-redux redux-thunk axios react-router-dom  

apiを叩けるようにredux-thunkをmiddleWareとして導入する

import React from 'react';  
import ReactDOM from 'react-dom';  
import { createStore, applyMiddleware } from 'redux';  
import { Provider } from 'react-redux';  
import thunk from 'redux-thunk';  
import { BrowserRouter, Route, Switch } from 'react-router-dom';  
import reducer from './reducers/index_reducer';  
import App from './components/App';  

const store = createStore(reducer, applyMiddleware(thunk));  

ReactDOM.render(  
  <Provider store={store}>  
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={App}></Route>  
      </Switch>  
    </BrowserRouter>  
  </Provider>,  
  document.getElementById('root')  
);  

テストしてみる

import React from 'react';  
// actionCreaterをインポート  
import { create } from '../actions'  

function App() {  
  // とりあえず、ボタンをクリックしたらactionCreaterを呼ぶだけのコンポーネントを作成  
  return (  
    <div className="App">  
      <button onClick={create({  
        "user": {  
          "email": "[email protected]",  
          "password": "password"  
        }  
      })}>SUBMIT</button>  
    </div>  
  );  
}  
import axios from 'axios';  
export const CREATE = 'CREATE';  

export const create = value => async dispatch => {  
  axios.defaults.withCredentials = true;  
  axios.defaults.headers.common['Content-Type'] = 'application/json';  
  const response = await axios.post('http://localhost:3001/users', value);  
  dispatch({ type: CREATE, response })  
}  

修正箇所など多々ありそうですが、一応これでユーザー登録は確認できたので備忘録として残します。

CORSの設定、axiosの設定など細かく見ていく部分が多くありそうなので
今後別途記事でまとめて行きたいと思います。

あと、React + RailsAPIのディレクトリ構成も何がデファクトなので調べる余地がありそう。

それではまた。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

30歳を目前にして、Webエンジニアを目指す愚か者です。 日々の学びを定着させるために、TECH系の記事を投稿していきます。 そしてできる限り少しでも同じような境遇の人の助けになるような情報発信を目指します。 現在学んでいるReact(JS)・Railsを中心にインフラやツール関連の投稿が主となるかと思います。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう