お次はRedux

http://redux.js.org/docs/introduction/index.html

Core Conceptsまで読んだ所で、これ以上何か読む事あるのか？という気がしてくる。 なかなかシンプルで小さいものだな。

Reactでstateが複雑になりうる、というのは想像出来るし、その時にこういうのがあると便利、というのも分かる。

副作用を嫌う世界観にも馴染みがあるので、やろうとしている事は自然に思う。 stateとactionを引数に次のstateが返る、とか、どっかで聞いた事ありそうな話だし。

consセルに比べるとJSのオブジェクトは大分でかい印象があるしいろいろ共有も難しそうだが、まぁそういうのケチる時代でも無いよな。

Prior Art

Prior Artの所でFluxというのが出てきた。なんか昔ちらっと見て良く分からんなぁ、と思った奴だが、この比較を見ると、そういう提案みたいな奴か、と位置づけを理解する。
個人的にFluxとはなんぞや？みたいなのにはあまり興味は無い（そもそもReduxも単なる教養程度のつもりで見てるし）ので、こんなもんの理解で十分かな。

ついでにオブジェクトでかくない？という話は、re-renderの方がずっと重要という話があって、これは分かる。 この辺は実際に使ってる人がいるライブラリって感じするよね。

Androidのアプリでも、自分は最近、stateを切り分ける、というをやってる。 これは結構Reduxでやりたい事に似ている。
例えばNotebookFrontendでは、状態の更新をgotoNextStateに集約するようにしている。 変更の場所を制限しておくのはいろいろと役に立つのだよな。

これはreducerのみで更新する事と似ている部分がある（違う部分もあるが）

Androidの場合、さらにActivityの再開の時に途中の状態から再開したいから、という事情もあるのだけれど。

Basics

Introductionが読み終わった段階で続きを読む必要があるかどうかちょっと悩んだが、とりあえず少し読んでみて意味無さそうならそこで辞めよう、と結論付ける。

まだReduxのAPIとかほとんど出てきてないしね。

Reducer

Reducerを読んでると、中では副作用は呼ばないように、とある。 Date.nowとか呼びたい時についてはAdvancedの方で扱う、とか。
へー、どうするんだろうね？

TOGGLE_TODOをmapで作るのは最近のJSはこういう感じなんだねぇ、とか思う。
昔consとかcarとかcdrしてた人としては馴染みもあるが、まったく共有の仕組み無しで全部複製していく様は、むしろさらに極端という気がする。

…による展開は知らない文法だな。ES6はちゃんと勉強しても良い気はするが、読むだけならだいたい想像つくからまぁいいか、という気がしてしまう。

combineReducersのオブジェクトリテラルの表記は知らない奴だな。という事でググって以下。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer

へー、変数名がプロパティ名になるのか。 なかなか珍しい言語仕様だな。

Store

これこそがreduxの提供する物な訳ね。 実際の実装はいろいろあるのかもしれないが、基本的な役割は数行で書けそうなわかりやすさなので、別段分からない事は無い。

Action Creatorの名前とか

Basicsを最後まで読んで、最後のコードリストを眺めての感想。

Action Creatorが名前からは分かりにくくてコードが読みにくい。慣れるものなのだろうか。ネームスペースとかでうまく解決出来るのかもしれないが、ES6良く知らんのでこの辺の流儀は分からず。

AddToDo とかReact側にもあってややこしい。

最終的にReactと混ぜて見ると、いまいち簡潔じゃないなぁ、という印象を持つ。 より本格的なアプリへと発展させていける、という理屈は分かるが、たかがToDoリストにしてはこんな書くのかったるい。

考え方を勉強するには良いし、大きなアプリ書く時にも良い気はするが、普段から常用したい、という気はあんましないなぁ。

Reactで書いててでかくなってきたらredux を入れる、くらいの感じが良さそうな印象。

さて、ここまででBasicsは終わりだが、これでは副作用を発行する時の流儀とかが分から無いので、Advancedもざっと眺めておくか。

Advanced

一応軽く眺めて、面白そうな所だけ読んでいくつもり。

Async Actionsの流儀はいいね

途中の状態をちゃんとstateにしなくてはいけない、は非同期アプリの作り方の鉄則でありながら、あまりパブリックな場にあるドキュメントでは見かけないなぁ、と思っていたが、Reduxの流儀に従うと自然とそうなるね。
これは良い。

computed propertyってなんぞ？と思ってググってみる。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer

なるほど、プロパティの名前を計算結果で展開した物にしてくれる感じか。 シンタックスはキモいが挙動は分かりやすい。

ES6はこの手のチュートリアルで新しく出て来る機能調べて行くくらいでも当面はいいかもなぁ。

thunkとか15年ぶり位に見た単語だな。ATLが最後かなぁ。

そしてThunk Middlewareとか出てくるがその挙動はここでは解説無し。これはいまいちだなぁ。

チュートリアル的には非同期はdispatchの外でやりましょう、で別に良いと思うのだが、なんでそうしなかったのだろう？ 項目で閉じてないってAdvancedとしては駄目じゃないか。

Middleware

この高階関数がアローの連続になるの、なかなか見やすくていいな。 ES6はこういうのにも向いた言語なのね。

C#もJSもKotlinもこういう方向に来たので、もうUI書く大半の言語は関数型の世界を取り込んだのだなぁ。

それにしてもthunkのmiddlawareはコードだけで解説無しか。まぁ読めば分かるけれど。

最後まで読んでの雑感

最後のReddit APIのコードを読んだ感じとしては、あまりいい感じに書けてる、とは感じないなぁ。 これで書けと言われれば書くが、自分が一から何か書く時にはたぶん使わないかな。

ただ勉強としてはなかなか良かった。 なるほど、こういう切り口のライブラリもあるのね。
ActionとReducerに分けてそれを組み合わせる、というのも、真似する機会は多そう。

チュートリアルはAdvancedの構成はちょっといまいちと思うが、全体としては良く書けていたと思う。 やはり本家のチュートリアルは良く書けているよなぁ。 ES6の解説も適度に挟まってて、今風のJSの書き方が少し垣間見えて良い。

これまで読んだどのRedux入門の記事よりもわかり易かった気がする。