LoginSignup
0
3

More than 5 years have passed since last update.

@bonk

node,npmの学習5

Posted at

redux+非同期通信周り

React + Redux に取り組んだ際のハマりポイント振り返り - 来年読む。
http://zarari.hatenablog.com/entry/2016/04/11/212641

いろいろざっと記載があって参考になる。

  • redux-thunk
  • isomorphic-fetch
  • redux-form

通常のライブラリより何が便利なのか。
フィードバックのイベントをreduxとして処理できる的なことかな。。
ミドルウェアのメリットってなんだっけ。

あと、debugのパッケージについても言及されてた。

トランスパイラをかませるとデバッガ上の表示が元ソースと別になる問題でしたが、source map という仕組みがありました。近年のブラウザは問題なく対応してるようで割と何年も前からあるみたいです。常識でしたか…

  • exorcist

気になる。

Example: Reddit API · Redux
http://redux.js.org/docs/advanced/ExampleRedditAPI.html

reduxの公式のAPIアクセスのサンプルコード。なるほどー。

babel-polyfillってなんだろ。。

babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた - Qiita
http://qiita.com/inuscript/items/d2a9d5d4daedaacff924

babelの変換において、古いブラウザでもある程度動かすようにしてくれるためのbabel-polyfill。
しかし、調べてみるとbabel-plugin-transform-runtimeというのもあった。
あまりドキュメントも充実しておらず何が違うのかわからなかったのでざっくり調べた。

Advanced Redux Action Types – Zack Argyle – Medium
https://medium.com/@zackargyle/advanced-redux-action-types-d5a71ed44e16

英語なのでいまひとつ理解しきれないが、非同期処理について詳しい。

Thunk Actions
Promise Actions
Queued Actions
Debounced Actions

redux-thunk、redux-promise、redux-async-queue、redux-debounce

  • Thunk Actions
    • dispatchをうまくつかって、非同期や決まった条件とセットになるアクションを記述できる、、かな
  • Promise Actions
    • アクションと定義により契約的な処理を記述、、かな
  • Queued Actions
    • 順序を担保しつつキューイングできる、、かな
  • Debounced Actions
    • 再実行処理を記述できる、、かな

middleware

Reduxのmiddlewareを積極的に使っていく - Qiita
http://qiita.com/kuy/items/57c6007f3b8a9b267a8e

ああ、ストアの近くで一元的に処理しましょうということかな。。
おお、redux-api-middlewareってなにそれ。

結論: ComponentとかReducerで変なことするよりmiddlewareでやった方がマシ

いろんなミドルウェアがありそうだから調べておいた方がいいかもな。。

redux-thunk

作って学ぶRedux Middleware - dackdive's blog
http://dackdive.hateblo.jp/entry/learn-redux-middleware

Redux で非同期処理を行うための Middleware である redux-thunk は、わずか 10 数行のこのようなコードです。
え、10数行なんだ。。

シンプルなコードからmiddlewareに迫っていくプロセスがいいな。
モンキーパッチって用語とか。

middlewareはメソッドの上書きであるモンキーパッチをマシにするために、
引数にdispatchをうけとるように工夫されてる処理。

redux-saga

まだちゃんと読めてないけど、タスクとして処理を管理できるっぽいので有用そう。。

redux-sagaで非同期処理と戦う - Qiita
http://qiita.com/kuy/items/716affc808ebb3e1e8ac

redux-saga/examples at master · redux-saga/redux-saga
https://github.com/redux-saga/redux-saga/tree/master/examples

reduxのmiddlewareを調査。。

いろいろプログラミングの概念の理解とか踏まえるときりがない。。
いろいろと、いまいちわからない。。

雑な感想とメモ【React Native Meetup #5】 20170519 @mercari - zuckey_17’s blog
http://blog.zuckey17.org/entry/2017/05/19/212926

Reduxから見えてきた希望と課題 | eureka tech blog
https://developers.eure.jp/tech/redux_feature/

xgrommx/awesome-redux: Awesome list of Redux examples and middlewares
https://github.com/xgrommx/awesome-redux

果てしなく素晴らしい、、

  • applyMiddleware
    • Middlewareの設定をするヘルパーメソッド
  • redux-promise-middleware
  • redux-logger
    • ブラウザコンソールにいい感じでAction/Stateをロギングしてくれる
  • react-native-fabric
  • react-navigation
  • redux-api-middleware
  • redux-middleware-logger
  • redux-mock-store
    • 非同期Actionのテストを書くためのライブラリ
  • isomorphic-fetch
  • ducks
  • nock
  • expect
  • reduxsauce
  • redux-observable
  • redux-debounced-action-dispatcher
  • redux-thunk
    • 非同期Actionをサポートする
    • 非同期処理を関数にして、シンプルに記述する、あるいは条件付きのアクションをシンプルに記述する。
  • redux-actions
  • redux-promise
    • 非同期処理をトリガーにアクションをキックするような処理のミドルウェアかな
  • redux-async-queue
    • 非同期処理を順序を担保しつつ実行するキューイングのミドルウェアかな
  • redux-debounce
    • バウンス（失敗扱い）された処理を自動でリトライする処理かな

RxJS

ReduxはRxJSの概念を使っているってことでいいのかな。

Rx(RxJS)を学ぶのにredux-observableは結構良いんじゃないかという話 – inuscript:memo – Medium
https://medium.com/inuscript/redux-observable%E3%82%92%E9%80%9A%E3%81%98%E3%81%A6rx%E3%82%92%E5%AD%A6%E3%82%93%E3%81%A0%E8%A9%B1-e9eadc75161d

リアクティブ・プログラミングに特化した JS フレームワーク Cycle.js を学ぼう #1 – 導入編 – ページ 2 – NET BIZ DIV. TECH BLOG
https://tech.recruit-mp.co.jp/front-end/post-11898/2/

RxJS を学ぼう #1 – これからはじめる人のための導入編 – NET BIZ DIV. TECH BLOG
https://tech.recruit-mp.co.jp/front-end/rxjs-intro/

Reduxの概念をRxJSとTypeScriptで理解する ver.2 - Qiita
http://qiita.com/ovrmrw/items/8cca6f40d5f78909a3dc

redux-observable

処理をループするのをアクション関数を軸にして考えるようにする形式ってことかな、、わからん

redux-sagaからredux-observableに書き換えてみる
https://devalon.biz/redux-sagakararedux-observablenishu-kihuan-etemiru/

転職会議の会員情報ページをReact化しました - LIVESENSE made*
http://made.livesense.co.jp/entry/2017/05/08/083000

アクションを構造化させて、ビジネスロジックと共通ロジックを整理できるのがredux-observableなのかな、、

ReactNativeで理解しておくと良いReduxとMiddlewareのフローを理解する - tomoima525's blog
http://tomoima525.hatenablog.com/entry/2017/04/24/164305

実例。

redux-observable の処理を marble testing で簡単にテストする
http://jyane.jp/2016/12/26/redux-observable.html

Redux は自身では非同期処理や副作用に対応できないため、これらを用いるには何らかの Middleware に頼る必要があります。
...
RxJSは非同期にとても強く、他の非同期処理との連携なども容易に記述することができ、NetflixもReduxの問題解決にこの Middleware を採用しています。（そもそも redux-observable や RxJS が Netflix の人が開発しているものだったりします）
...
marble testing を用いて直感的かつ簡単に Test を記述できる

なるほど。。redux-sagaより便利に使えるってことなの？？

規模と実装

わかっているところ以外は、最初はシンプルな構成で必要に応じて構造化していく感じかな。。

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
3