React+StoryBook+AdminLTEでのComponent開発環境(1)
es6のgeneratorやyieldやpromise周りの振る舞い
前回で環境構築は終わったけれど……
最後にgeneratorやyieldやpromise周りの振る舞いを一度勉強し直しておこう。たびたび使っているのに振る舞いがよくわからないし。
おさらい
とりあえず今までの使い方からして、yieldを頭に付けておくことで呼び出した関数が終了するまでcodeが待機してくれるというのはわかる。同期的な処理。
ただpromiseとgeneratorって別物なのかとか、yieldで止めているというのはどういう状態を意味しているのかとか、わからない。
そこかな。
続きを読むreact+redux+react-router-redux+redux-sagaの環境を自分なりに使いやすくしていく
Event SourceやWeb Socketを使うにあたっての考察
背景
Reactの記事はちとまって欲しい。gitにcodeをあげたら下書きにしたものをアップするんじゃ。
Server上のlogをtail -n 5 -F /var/log/messagesなどで見るような感じで、Web Page上で見たい、という気持ちがあった（あった……）。
これをMojoで実現しようとしたのだけれど、Server Applicationの中でFile::Tailして読み出しながらEvent Source(以下ES)で接続してきたClientに配送しようとしたら、結構blockingしてしまって困った。
いやこのあたりはもっとうまく組めばいけたのかもしれないけど今のところうまくやる方法が思いつかなかったの。
いっそtail commandをMojo::IOLoopとかにいれてしまえばというのも考えたけど、監視したいlogが増えたりしたときにServerの下にchild processがいくつもぶら下がるのはあんまり楽しくない。
前にhypnotoadで立ち上げたらprocess落とせずに残っていたりしたからな……。こやつらのせいでportが使用済みになってserverを再起動しようとしたら蹴られたりしたし……。
ということをもやもやと考えながら結局どういう指針を取るのが良さそうか考察していったという話。
未検証タグがついているように結論で述べていることについてはまだ実験してない。どこかでやってみたい。
続きを読むなんとかredux-sagaを使うに至る話
今回のあらすじ
redux-sagaを使おうとしたけれど理解がおいついていなかった僕はいろいろ調べた結果、これFluxの流れをもう少し理解しないと駄目だわ、となり、いろいろ調べることになって全然実装にたどり着けずに終わった。
今回こそとりあえず使えるようにする。したい。けれどやはり迷走した。したけどなんとかなった、という話。
さてじゃあそろそろ使ってみよう
まずはimport。
import { gettestStore, gettestReducer, GettestContainer } from '/components/GetTest';
そしてrender
ReactDOM.render(
<Provider store={store}>
<GetTestApp />
</Provider>,
document.querySelector(".saga")
);
importの中身はReflectFormと同じ。
これでまずは表示できることを確認。とはいえこのままだとGetFormかReflectFormのどちらかをいじれば両方反映されてしまう。修正しないと。
とりあえずGetFormのReducerでのreturnをstate変更なしに変更。
するとReflectFormの方でだけvalueが反映されるようになった。へぇ。そうなるのか……。
えーっとどういじればいいのかな。たぶんeventを変えればそれで通るんだろうけど。
うん。出来た。
eventの名前が重複しないようにどこかに定義した方がいい気がするなあ。あとreducerの名前もか。どうしようかな。
続きを読むredux-sagaを触ろうとしてそれ以前に整理しまくった話
非同期処理を扱いたい
とはいえreduxというStoreをうまく使うために作られたframeworkがあるせいでdataの更新とかここにすごく関わってくるので不用意に出来ない。さて何をどうすればいいのか。
（今回派手に迷走します）
libraryがいろいろ
で、調べてみるとreact-sagaといもうのがあった。ちなみにredux-sagaというのもある。redux環境下で使うならたぶんredux-sagaだよね。dataの取り回し周りに関わってくるだろうから……。
ああredux-thunkというのでもいけるらしい。
どうもこれらは非同期処理をreduxに入れ込んであげたいという要求の元に生まれたみたい。 で、違いは何さ。
おおう。redux-promisというのも出てきた。ええいかまうものか。ふるいにかけてくれるわ（まあそのためにはまず知識の海でおぼれてこないといけないんだけど……）。
非同期処理をコンテナ(またはそこで使うモジュール)に書くだけ。 今は、非同期処理をするためのredux middlewareを使ってないです。 過去記事(react, redux周りのパッケージ選定とKPT[2016-05-27現在])にて、この辺についてもなんやかんやと言っているけど、今はthunkもpromiseもsagaも使っていない。その実装が凄くシンプルで気に入ってるので紹介します。
ってここの人は結局使わないという結論に至ったのか。それはそれでわかりやすい。
Promseとasync/awaitを覚えればいいと。ほうほう。
まあここまで触れてみて思ったけど確かに無理してreact-routerとか使う必要ないなあとは思い始めている。reduxもそう。
なんだろう。これ僕の性格がframeworkとあわないという事なのだろうか。そんなひどい。でも体系的なところは自分で考えたい、自分のセンスでやりたいという欲求は確かにある。
もうちょっと調べてみて使うかどうか考えてみよう。
疑問はこのあたり。
- redux#bindActionCreatorsってなんぞや
- Promseとasync/awaitってなんぞや
- redux-sagaの使い方
- redux-thunkの使い方
- redux-promiseの使い方
react-routerに触れてみようとしてreact-router-reduxに触れてみた話
背景
page urlにあわせてdomの表示切り替えたりできたら格好いいなーと思ったのでそれを実現できそうなものを探す。するとreact-routerというものを見つけ、さらにredux上で動かすならreact-router-reduxかredux-routerのどっちかがいるという話になり、うむ、どういうこっちゃ、と調べていった話。
まずは何が何だかわからないのでreact-routerをとっかかりに調べてみる
いろいろあるんだけど何をどう使えばいいのかよくわからない上にこれらのlibraryの機能がそもそもよくわかってないので調べてみる。
reactのルーティング機能？というかテンプレートシステムというか？にreact-routerがあります。リクエストパスに応じて画面構成要素を組み立てるのでreact-routerを使ってアプリケーションを作ると当然URLと画面は同期することができます。URLを直打ちしてもコードでURL遷移させても、適切な画面に切り替わるように作れるのです。
reduxはその際にどうかというと、URLや画面構成といったものについて素で働きかけるものではないので、URLが変化してもreduxのステートマシンにはその情報は反映されません。そこにはもう一つ上乗せするものが必要です。いくつか同じ守備領域のライブラリがあるようですが、わたしはここのところしばらく、中でも主流感のあるreact-router-reduxを用いています。
ふむふむ。少なくともreactだったらreact-routerで動作してくれる。でもreduxのstateには反映されないのでつなげるためにreact-router-reduxを使う、と。
いやまてなんか調べてたのと違うものが出てきたぞ。
Reactのラウター(ルーターではない)ライブラリとしてよくreact-routerが使われる。react-routerの機能は十分だが、現在表示しているページという"状態"がアプリケーションに登場する。これもできればstoreに押し込めたい。ということで登場したライブラリ。react-routerをベースにしたライブラリなので、まずreact-routerから見ていく。
こっちにはredux-react-routerと……あれっ。githubへ飛ぶとredux-routerになっている。 まあ変わったのかな。よくある。
redxu-routerはreact-routerのAPIをReduxから利用出来るようにするもの。
Reduxではステートを1つのStoreで管理する規則があるが、redux-routerを使うことで、RouterもStoreで管理できるようになる。
んもう。どーれー使えばいいんだー。
Please check out the differences between react-router-redux and redux-router before using this library
おっとぅ。
ここを読む限り実現の仕方が結構違うみたい。あとreact-router-reduxはReact Communityのlibrary。
というか本家のprojectにいろいろ興味深いのがあるな。このあたりは後で使ってみたい。
続きを読む