ちょっと触れたことはあったけど、ちゃんと理解してないので全然身についてない。ということで、今日はReduxをやってみることにしました。
まずは、READMEを読みます。Documentationもしっかりしてそうなんだけど、とりあえず、Free Videoを見たほうがよさそうな雰囲気なのでGetting Started with Reduxを見てみます。
Getting Started with Redux
こんな感じで、基本的なところから丁寧に教えてくれます。英語ですけど、平易な言葉で説明されていて聞き取りやすかったです。
jsbin
Videoを見てたら、jsbinというonline JavaScript EditorをReduxの作者は使っているみたいなので、同じツールで真似して書いてみた。動いたのでこれで必要なところは真似して書いてみる。
ReactとReduxを簡単にテストできる環境
本筋とは関係ないけど、cdnを使って簡単に環境が作れた。自分用にwebpackのsnippetは作ってあるけど、さくっとonline editorで試したいときとかは使えそう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script>
<script src="https://fb.me/react-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
</head>
<body>
<div id='root'></div>
</body>
</html>Lesson22
動画に集中しすぎて目も忘れてた。。。Exampleを作ってリファクタリングしていくところ。DidMountで変更をsubscribeしてWillUnmountで解除する。
Lesson22は面白い。storeを使って、値を次々と渡していくのではなく、Storeを直接監視することで、値渡しを沢山しなくても良いというReduxの良さがわかった。
Container componentとPresentation component
Container componentはstoreにactionをdispatchしたりして、Presentation componentは単に表示することだけができると考えれば良いかな。
Storeを受け渡すシンプルな方法
Lesson25
こうすることで、明示的にstoreを子に渡さなくても、どこからでもstoreにアクセスできるようになる。contextTypesの話などあるのでLesson25はあとでまた見返してもいいかもしれない。
ReactRedux
[gallery ids=“5432,5433,5434” type=“rectangular”]
ReactReduxを利用すればProviderがシンプルに書ける。
ReactReduxのconnect
Lesson27
これを使えばさらに色々省略できるっぽい。
Lesson28
これは、再度学習する必要ありだ。あー、もしかして、connectはContainer componentをシンプルに書けるようにしてくれてるのかな。
あぁ、dispatchとstateをインジェクション？してアクセスしやすくするのか。
Actionを分離
Lesson30
conectを使って、stateとdispatchにアクセスしやすくしたんだけど、さらにdispatchを分離するということをやった。
次にやること
とりあえず、一通りビデオを見てよかった。Lessonも最初の方はちょっと複雑だなぁと思ったけど、後半リファクタして行ってどんどん効率的にシンプルに書けるようになってきて面白かった。ただ、後半疲れて英語も集中して聴けていなかったのでいろいろ抜けているところもあると思う。ということで、次に隔週したいことをメモしておく。
-
どういう構造で作れば良いのか学ぶ。
- ビデオでは全て一つのファイルで書いていたのでディレクトリわけがわからなかった。これはREADMEにあったサンプルプロジェクトを見れば良いのだと思う。
- ドキュメントを読む。すごく充実したドキュメントがあって、内容も興味深い。読んでみたい。
- 一つアプリを作ってみる。Github、またはS3にホストする形で一つ作ってみるのが良いと思った。