React-Reduxを触ったのでまとめ記事

この記事は、 PMOB Advent Calendar 2017 の記事です。

next-> menotter

React-Redux触ったので、 React-Reduxとは何か、ハマるポイントはどこか、 という点で書きたかったのですが、既存の記事がのほうが当たり前ですがとても良かったので、 まとめ記事みたいになりました。

前はサーバサイド技術に興味あったのですが、 フロントエンド界隈のエモい話が色々と僕のアンテナに引っかかったので今更ながら React-Reduxしました。

環境構築

今回はとりあえずかければいいや！ってことで create-react-appを実行

$ npm install -g create-react-app
$ create-react-app myapp
$ cd myapp

これはfacebookが出してるreactスターターキットみたいなやつで、 裏でwebpackやらが動いてるみたいですよ。

github.com

加えて、reduxも入れていきます。

$ npm install --save redux react-redux

とりあえずこれでおけー。

実行するときは

$ npm start

で諸々やってくれてlocalhost:3000で出来たのが見れる感じです。 便利:D

環境構築大変って聞いてたけどこだわらなければ結構さっくり環境構築できちゃいますね。

React

ちょろっとチュートリアルやったことあったので公式を頑張って読んでなんとかしました。

reactjs.org

ReactはいわゆるMVCフレームワークにおけるただのViewでしかないってのを 聞いたことがあります。 ので、その印象を持ったままチュートリアルをやったら個人的に分かりやすかったですね。

公式docが良かった感じしたので公式docを読むのがイイかなーって感じです。

Redux

これが難しくて大変だった。

mae.chab.in

がすごく分かりやすかったのでめっちゃ参考にしました。

Reduxとは

Reduxは何かっていうと、Reactが扱うUIの状態を管理するフレームワークです。

これはFacebookが提案したReactで状態の管理する上で提案されているデータフローある「Flux」 の概念をより扱いやすく拡張したもの…だそうです。

qiita.com

どうやらReact以外のAngularとかでも使えるみたいですが、 ちょっと書いてみただけでも、 Reactとの親和性がメッチャ高いって分かるので、 Reactと使うのが良さそうな感じしてます。

React-Redux

概念の理解には以下の記事が分かりやすかったです。

qiita.com

ようは「React高機能だしイイカンジに状態管理できたら生産性上がるよね。じゃあReduxと組み合わせて使おうぜ。」 的なことかなって理解してます。

ハマりポイント

結構雑にToDoアプリてきなものを1からかいていたんですが、 React-Reduxの

  • connect
  • Provider

がマジでどうなってんのか意味わかんなくてしばらく手が止まりました。

するとQiitaにピンポイントな記事が…！

qiita.com

もう僕これ書くこと無いよ〜〜(泣)

ToDoアプリ作るときに参考したソースコード達

めっちゃ参考にしました。(というか殆どコピｐ…はい…。)

一応出来たもの

github.com

本当にひどいものができた…。 某でやってる某の採点用ウェブページのフロントエンドとして 実装を進めているので年内に整理します。 絶対もっと後でもっとまともにします。

余談

github.com

ってのを紹介してもらいました。 CSS書けなくてもこれあればそれっぽいカッコいいさいとつくれるじゃ〜ん、 ってなってテンション上がってます。