My first redux

My first reduxちょっと触れたことはあったけど、ちゃんと理解してないので全然身についてない。ということで、今日はReduxをやってみることにしました。

まずは、READMEを読みます。Documentationもしっかりしてそうなんだけど、とりあえず、Free Videoを見たほうがよさそうな雰囲気なのでGetting Started with Reduxを見てみます。

Getting Started with Redux

Redux__Describing_State_Changes_with_Actions_-_js_Video_Tutorial__free__eggheadio

Getting Started with Redux

こんな感じで、基本的なところから丁寧に教えてくれます。英語ですけど、平易な言葉で説明されていて聞き取りやすかったです。

jsbin

Videoを見てたら、jsbinというonline JavaScript EditorをReduxの作者は使っているみたいなので、同じツールで真似して書いてみた。動いたのでこれで必要なところは真似して書いてみる。

JS_Bin_-_JS_Bin_と_Redux__Store_Methods__getState____dispatch____and_subscribe___-_js_Video_Tutorial__free__eggheadio

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

Redux__Extracting_Container_Components__FilterLink__-_js_Video_Tutorial__free__eggheadio

動画に集中しすぎて目も忘れてた。。。Exampleを作ってリファクタリングしていくところ。DidMountで変更をsubscribeしてWillUnmountで解除する。

Lesson22は面白い。storeを使って、値を次々と渡していくのではなく、Storeを直接監視することで、値渡しを沢山しなくても良いというReduxの良さがわかった。

Container componentとPresentation component

Container componentはstoreにactionをdispatchしたりして、Presentation componentは単に表示することだけができると考えれば良いかな。

Storeを受け渡すシンプルな方法

Redux__Passing_the_Store_Down_Implicitly_via_Context_-_js_Video_Tutorial__free__eggheadio

Lesson25

こうすることで、明示的にstoreを子に渡さなくても、どこからでもstoreにアクセスできるようになる。contextTypesの話などあるのでLesson25はあとでまた見返してもいいかもしれない。

ReactRedux

ReactReduxを利用すればProviderがシンプルに書ける。

ReactReduxのconnect

Redux__Generating_Containers_with_connect___from_React_Redux__VisibleTodoList__-_js_Video_Tutorial__free__eggheadio2.png

Lesson27

これを使えばさらに色々省略できるっぽい。

Lesson28

これは、再度学習する必要ありだ。あー、もしかして、connectはContainer componentをシンプルに書けるようにしてくれてるのかな。

あぁ、dispatchとstateをインジェクション?してアクセスしやすくするのか。

Actionを分離

Lesson30

conectを使って、stateとdispatchにアクセスしやすくしたんだけど、さらにdispatchを分離するということをやった。

次にやること

とりあえず、一通りビデオを見てよかった。Lessonも最初の方はちょっと複雑だなぁと思ったけど、後半リファクタして行ってどんどん効率的にシンプルに書けるようになってきて面白かった。ただ、後半疲れて英語も集中して聴けていなかったのでいろいろ抜けているところもあると思う。ということで、次に隔週したいことをメモしておく。

  • どういう構造で作れば良いのか学ぶ。
    • ビデオでは全て一つのファイルで書いていたのでディレクトリわけがわからなかった。これはREADMEにあったサンプルプロジェクトを見れば良いのだと思う。
  • ドキュメントを読む。すごく充実したドキュメントがあって、内容も興味深い。読んでみたい。
  • 一つアプリを作ってみる。Github、またはS3にホストする形で一つ作ってみるのが良いと思った。

Pocket
LINEで送る

You may also like...