2017-04-16

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

JS React

今回のあらすじ

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の名前もか。どうしようかな。

2017-04-14

redux-sagaを触ろうとしてそれ以前に整理しまくった話

React JS

非同期処理を扱いたい

とはいえ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の使い方

2017-04-12

react-routerに触れてみようとしてreact-router-reduxに触れてみた話

JS React

背景

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