Reactで実装した機能をリリースしました
先日、もぐナビのスマートフォンサイトで、Reactで実装した機能をリリースしました。いくつかの機能をReactで実装したのですが、この記事ではクチコミ投稿機能に関して使った技術や参考にしたページを振り返ってみたいと思います。
React
まずは、言わずと知れたReact自身です。
React – ユーザインターフェース構築のための JavaScript ライブラリ
ただ、Reactに本格的に触れるのは今回が初めてだったので、プロトタイプをcreate-react-appで始めました。
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita
また、途中から、どうせES6で書くなら、せっかくならTypeScriptで書こうと思い直し、create-react-appでTypeScriptのプロジェクトを生成しました。
React + TypeScriptプロジェクトをcreate-react-appに任せる - Qiita
Redux
実装した機能は、クチコミ用のダイアログをオーバーレイで表示し、ダイアログ内でページ遷移をしながら内容を埋めていくというものです。 複数のページ(React的にはコンポーネント)にまたがってオブジェクト(データ)を共有するには、どうやらReduxというものを使うらしいということを知りました。
Getting Started with Redux · Redux
そもそもReactのstateも知らなかったので理解が大変でしたが、以下のページなどを参考にして作ってみました。
Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説 | maesblog
実際に使えるようになるまでは、そこそこ苦労しましたが…。
react-modal
クチコミダイアログのオーバーレイ表示は、react-modalを使いました。
GitHub - reactjs/react-modal: Accessible modal dialog component for React
使い方はさほど難しくはありませんでした。styleは外部からCSSで指定しました。
react-modalを使ってモーダルを表示する - わいの技術メモ
redux-thunk
今回はサーバーとの通信があったので、いくつか調べた結果、Action内で通信する選択肢としてredux-thunkを使用することにしました。
reduxで非同期処理をするいくつかの方法（redux-thunk、redux-saga） - Qiita
ReduxのAdvancedな使い方 ~ 公式ドキュメント Advanced~ - Qiita
redux-thunk自体はシンプルなので、サンプルを見てすぐに使えるようになりました。
ただ、この時点ではES6のアロー関数にもあまり慣れていなかったので、以下のページを読むことで、色々な理解が深まりました。
react-router-dom
ダイアログ内でのページの切り替えやリンク移動については、react-router-domを使用しました。
react-router@v4を使ってみよう：シンプルなtutorial - Qiita
ささっと学ぶReact Router v4 – the2g
実際に使ったのはv5です。
react-router自体は、上記ページを参考にして問題なく使うことができました。
ただ、Actionに伴いページ遷移をさせるときに使ったconnected-react-routerを理解するのに少し苦労しました。
こちらの記事に書いてあるように、
React Router v4とReduxを繋げるにはconnected-react-routerを使うのがおすすめだよ！ - Qiita
- historyオブジェクトを作る
今回はブラウザのURLを変えたくなかったので、createMemoryHistoryを使いました。 - connectRouterでrouterReducerを取得する
今回は他のreducerとcombinedReducerしました。
// reducer作成
const reducer = combineReducers({
product: productReducer,
picture: pictureReducer,
comment: commentReducer,
…
form: reduxFormReducer,
router: connectRouter(history),
});
- Providerの子要素にConnectedRouterを置き、historyオブジェクトを渡す
とし、
- Routeを使うコンポーネントはwithRouterでラップしてexportする
- Actionでページ遷移するときは、pushをdispatchする
import { push } from 'connected-react-router';
…
// リピする？の入力フォーム
export const setRepeat = (value: string) => (dispatch) => {
// reducerでstoreを更新
dispatch({
type: SET_REPEAT,
repeat: value
});
// いつ食べた？ページに遷移
dispatch(push('/product/detail/when'));
};
という実装で実現できました。
下の記事でRouterの中の仕組みが少し分かって、理解に役立ちました。
React Routerのhistoryはどこから来るのか | TECHSCORE BLOG
ひとまず
大まかなメインの動作は、こんなところです。 UI上の工夫は他にも色々としているのですが、その辺りはまた別の記事にしたいと思います。
実際の動作については、ぜひ、もぐナビに会員登録してクチコミをしてみて下さい！
それにしてもQiitaって便利ですね。
