【React】＋【RailsAPI】 create-react-app を使ったアプリ [2] よく使いそうなモジュール

前回 に続き、フロントに React、バックエンドに Rails（APIモード）を使うアプリの、よく使いそうなモジュールの紹介です。

ArtefactGitHub/Re_T_Todo

axios

ブラウザおよび node.js 用の Promise ベースの HTTPクライアント。Get や Post などを Promise による非同期通信処理で使います。

$ yarn add axios

基本的に get/post などのメソッドの第一引数にリクエストするURL、POST では第二引数に渡すデータ（オブジェクト）を指定する。

# GET
axios.get(`http://localhost:3001/hoges`)

# POST
axios.post(`http://localhost:3001/hoges`, data)

axios
 .post(`${Settings.API_URL}/hoges`, data)
 .then(res => {
   dispatch({ type: "POST_HOGE", payload: { hoge: res.data } })
 })
 .catch(data => {
   console.log("failure", data)
 })

複数の通信処理を同期させたい場合 axios.all が使える（Promise.allの代用）。

axios.all([getUserAccount(), getUserPermissions()])
 .then(axios.spread(function (acct, perms) {
   // Both requests are now complete
 }));

node-sass

Node-sassは、Node.jsをLibSass（人気のスタイルシートプリプロセッサSassのCバージョン）にバインドするライブラリです。
それはあなたが信じられないほどの速度でそして自動的に接続ミドルウェアを介してcssに.scssファイルをネイティブにコンパイルすることを可能にします。

# ※react-scripts@2.0.0以上が必要
$ yarn add node-sass

ファイル拡張子の css を scss に変更します。

src/App.css　→　src/App.scss

import構文
プロジェクト内の参照はそのままパス指定しますが、node_modules 下を参照する場合はパスの先頭に '~' が必要になります。

@import "hoge/fuga.scss"

# node_modules 下を参照する場合
@import "~bootstrap/dist/css/bootstrap.min.css";

react-bootstrap

ReactブートストラップはBootstrap JavaScriptを置き換えます。各コンポーネントは、jQueryのような不要な依存関係なしに、真のReactコンポーネントとして最初から構築されています。

$ yarn add react-bootstrap

react-bootstrap 自体には CSS が含まれていないため、bootstrap もインストールし、import します。

$ yarn add bootstrap

# App.scss
@import "~bootstrap/dist/css/bootstrap.min.css";

CDN から取得する場合は こちら。

コンポーネントで "react-bootstrap" を import することで、col や form、nav などが使えるようになります。

import {
 Container,
 Row,
 Col,
 Form,
 FormLabel,
 FormGroup,
 FormControl,
} from "react-bootstrap"

redux-thunk

action で通信をリクエストして、その戻り値で store を更新するなど、redux で非同期処理を扱いやすくするミドルウェア。
利用準備として store 生成時に applyMiddleware で渡します。

# index.js
import { createStore, applyMiddleware } from "redux"
import thunk from "redux-thunk"

const middlewares = [thunk]
const store = createStore(rootReducer, applyMiddleware(...middlewares))

通常 action は type を持つオブジェクトを生成しますが、redux-thunk を利用した非同期のアクションは、dispatch を引数に持つメソッドを生成します。メソッド内部で非同期処理を含む任意の場所で dispatch を実行し、store へ action を発行します。

const loadHoges = () => {
 return dispatch => {
   axios
     .get(`${Settings.API_URL}/hoges`)
     .then(res => {
       dispatch({ type: "LOAD_HOGES", payload: { hoges: res.data } })
     })
     .catch(data => {
       console.log(data)
     })
 }
}

redux の非同期ミドルウェアは他にもあり、「redux-thunk」「redux-saga」「redux-observable」が代表的で、それらは実装の複雑さや必要になる技術によって使い分けるようです。
それほど複雑でなければ thunk を使い、規模が大きく複雑になれば saga や observable のどちらか、または thunk との併用が推奨されています。