JSON
Rails5
React16

RailsをReact化する自分用メモ

RailsビューをReact化

ルーティングする。packs/config/routes.jsxを変える。
Rails側も、エントリーポイントに行くように合わせる。
今回の場合は、routes.rb の中、get ‘message’, to: ‘accounts#show’ のようにto以下をエントリーポイントと同じにする。

そのページのJSON化
URLからルーティング調べて、コントローラとアクションを特定
そのコントローラから書き出しているインスタンスを調べる。

どうやってJSON化する?
views(ビュー)にjson.jbuilderで描き出すファイルを用意する。(適当に 他のファイル複製)
内容をコントローラーのインスタンスに合わせて変える。

例)
/mypage/registration.json
http://localhost:3000/mypage/***egiver_base/1.json
ブラウザで描き出されているかチェックする。

適当にjsxファイルをコピーして作り、
superagentで、jsonをstateに取得する。
初期値を忘れずに設定。

Railsの viewで form_for を見つけちゃったら。キツイ

routingで url と patch post 確認する。
移植前のページをブラウザ開き、formの method=‘post’ 送信方法を確認
inputなど、タグの
action 送信先
name 送信するキー
value 送信するバリュー
を確認する。

接続先 rails routes コマンドでもいちを確認。コントローラ側でのリクエスト、レスポンス処理を確認。

例)


予約承諾
辞退

SuperAgentを作っていく。

エントリーポイントに
=csrf_meta_tags を埋め込む。

jsxファイルに、
import request from 'superagent’;
submit する時は、qsもインポートする。

通常の動き
Parameters: {"utf8"=>"✓", "authenticity_token"=>"8TT8Yq9IoqPsT5+cNYYMh5kwl2NBNgO1jzrEUvBhcC8npdKVwk8J61d1NH7/Wtvyu1fyoVB6wZyEqEzQRbYJqg==", "reservation"=>{"statement"=>"6"}, "go_change"=>"確定する", "id"=>"12”}

今の動き。。
Parameters: {"utf8"=>"✓", "reservation"=>{"statement"=>"2"}, "id"=>"10”}
(CSRFトークンは、HTTPヘッダーの方に入ってるので確認)

するとUPDATEがかかり、コントローラ側でリダイレクトがかかるので、
リダイレクトしないように、訂正する。

正常系では

- redirect_to ほにゃらら
+ head :ok

異常系では

- redirect_to ほにゃらら, msg: "ほにゃらら"
+ render json: { message: "ほにゃらら" }, status: :bad_request

以上、生産性を上げるためのメモでした。