Reduxの勉強

Redux

ここを一通り読めばわかりそうだ！と思って読み始めたら、いきなりプレディクタブルステートコンテナとか言われてよく分かりません。

Redux is a predictable state container for JavaScript apps. Read Me | Redux

ステートは普通に状態でいいのだろうか？あまり知らないため、用語を使っていたらわけわからなくなると思いながら、とりあえず読み進めることにしました。

30分の動画があるためそれを見る。なんか10個くらいあるようです。（間違ってました、後述）

1. ToDoアプリを用いて、画面の状態が一つのオブジェクト（State Tree）に対応していることの実演。
2. State Treeはリードオンリーで、操作（type）とデータを持ったオブジェクト（Action）によって変更される。
3. Pure FunctionとImpure Functionの違い。副作用がないこと（戻り値を返す以外の方法で出力を行わないことかな？）
4. StateとActionを受け取り新しいStateを返すのがReducer、これはPure Functionになっている。だから同じStateとActionを入れれば同じStateが必ず得られることが保証される。（ちょっと英語怪しくなってきました...）
5. 数字を増やしたり減らしたりするだけのCounter Reducerを例に、ReducerとTestの説明をしている。expect(...).toEqual(...)って感じで書いている。またReducerの実装上の注意など説明されていた（未定義なtypeのAction、stateのデフォルト値など）
6. Reduxの導入と、Storeのもつメソッドの説明。ReduxのcreateStoreメソッドによってReducerを引数にStoreというものが作られている。StoreはsubscribeメソッドによってViewの書き換えを行なったり、stateを保持しているようだ。StoreにActionをdispatchメソッドによって食べさせることで保持しているstateが更新されている。こいつは副作用を担っているっぽいです。
7. createStoreの実装に関する説明。getState、dispatch、subscribeの三つを提供してくれるがこれらが何をしているかを説明してくれた。subscribeがあまりわからない...内部に持つlisteners配列を更新するが、filter処理はなにをしている？
8. renderにはReactを使おう！その際はコールバックを渡すのがいいよ、という説明。おそらく先ほどのsubscribeのおかげでStoreが変更を反映してくれているんだろうという程度の理解。
9. テストにdeepFreezeを使ってイミュータブルな処理をちゃんと書こうという話かな？es6の記法(配列listに対して...listを使うことで中身を展開できる)をつかった小粋な書き方とか勉強になりました。
10. 引き続きテストの話。Object.assignとes6...objectの記法の説明。自分の英語力だと3点リーダの記法がいいように聞こえたんだけどどうなんだ？

いまさら気がついたのですが、この動画30分ではなく30個の動画だったのですね...

30見ていると何も達成感がないのでとりあえずまとめとしてカウンターアプリを作ってみよう。

と思ったのですが、環境構築がうまくいかずに断念。webpackを勉強しないといけない。

感想

ビルドツールになぜか苦手意識があることが判明しました。なぜ嫌なのだろうか？webpackを調べつつ、Redux触っていきたいです、あわよくばElectronでアプリ作りたいです。