読者です 読者をやめる 読者になる 読者になる

かえるの井戸端雑記

開発日誌的な記事だったり備忘録だったり。まとめ記事と言うよりは、七転八倒の様子を小説みたいに読んで眺めてもらえればと。

なんとかredux-sagaを使うに至る話

今回のあらすじ

redux-sagaを使おうとしたけれど理解がおいついていなかった僕はいろいろ調べた結果、これFluxの流れをもう少し理解しないと駄目だわ、となり、いろいろ調べることになって全然実装にたどり着けずに終わった。

frogwell.hatenablog.jp

今回こそとりあえず使えるようにする。したい。けれどやはり迷走した。したけどなんとかなった、という話。

さてじゃあそろそろ使ってみよう

まずは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に入れ込んであげたいという要求の元に生まれたみたい。 で、違いは何さ。

qiita.com

おおう。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の機能がそもそもよくわかってないので調べてみる。

mk.hatenablog.com

reactのルーティング機能?というかテンプレートシステムというか?にreact-routerがあります。リクエストパスに応じて画面構成要素を組み立てるのでreact-routerを使ってアプリケーションを作ると当然URLと画面は同期することができます。URLを直打ちしてもコードでURL遷移させても、適切な画面に切り替わるように作れるのです。

reduxはその際にどうかというと、URLや画面構成といったものについて素で働きかけるものではないので、URLが変化してもreduxのステートマシンにはその情報は反映されません。そこにはもう一つ上乗せするものが必要です。いくつか同じ守備領域のライブラリがあるようですが、わたしはここのところしばらく、中でも主流感のあるreact-router-reduxを用いています。

ふむふむ。少なくともreactだったらreact-routerで動作してくれる。でもreduxのstateには反映されないのでつなげるためにreact-router-reduxを使う、と。

いやまてなんか調べてたのと違うものが出てきたぞ。

qiita.com

Reactのラウター(ルーターではない)ライブラリとしてよくreact-routerが使われる。react-routerの機能は十分だが、現在表示しているページという"状態"がアプリケーションに登場する。これもできればstoreに押し込めたい。ということで登場したライブラリ。react-routerをベースにしたライブラリなので、まずreact-routerから見ていく。

こっちにはredux-react-routerと……あれっ。githubへ飛ぶとredux-routerになっている。 まあ変わったのかな。よくある。

blog.takanabe.tokyo

redxu-routerはreact-routerのAPIをReduxから利用出来るようにするもの。

Reduxではステートを1つのStoreで管理する規則があるが、redux-routerを使うことで、RouterもStoreで管理できるようになる。

んもう。どーれー使えばいいんだー。

github.com

Please check out the differences between react-router-redux and redux-router before using this library

おっとぅ。

ここを読む限り実現の仕方が結構違うみたい。あとreact-router-reduxはReact Communityのlibrary。

github.com

というか本家のprojectにいろいろ興味深いのがあるな。このあたりは後で使ってみたい。

続きを読む

Redux DevToolsとの連携

少しおさらい

前回の最後の方に紹介した。Redux DevToolsだけど、このままだとちょっと嬉しくない。

frogwell.hatenablog.jp

何が嬉しくないってRedux DevToolsに問題があるわけじゃなくて、この書き方だと常にRedux DevToolsが機能してしまうという点。さすがに配布versionにはいれなくていいと思うのです。

というわけでうまく切り分けてみようと思う。

続きを読む

ES6での開発環境を作る

もとをただせば

基本的に僕は作業日誌的にblogを書いていくのであんまりまとめっぽいものがない。

それはそれでいいのだけれど、時折一区切り着いたらまとめたくなる時もある。あるのです。ということで今回はES6でのjs開発環境を作る記事をまとめてみた。

実質的な内容は以下のpageと同じ。

frogwell.hatenablog.jp

そのうちQiitaにでもあげようかな。

続きを読む

React+Reduxにも触れてみる 4. がしがし整理していった結果

背景

前回こういうことをして、React-Reduxの動作を把握した。

frogwell.hatenablog.jp

で、それをうまーく整理していくと第二回で紹介したgitのような構成にできる。

frogwell.hatenablog.jp

今回はそこまでの過程というか、その過程で起きたことをだらっと書いていく。

続きを読む

React+Reduxにも触れてみる 3. 試しに書いてみる

前提

前回こういうことをした。

frogwell.hatenablog.jp

だけど残念ながら完成形の説明だけをしていると筆者的に飽きてくるのでやはり試行錯誤を書くことにする。

ということで前回のことは忘れてほしい。

今回の話

まずは以下のpageの通りに環境をつくって動作確認してみる。

mae.chab.in

で、codeの読解をしてみた。そのときのlog抜粋。

続きを読む