react-redux v7.1＋TypeScriptでconnect, mapStateToProps, mapDispatchToPropsを撲滅する - 文系プログラマによるTIPSブログ
ついに例の定型文3兄弟を除去する事ができるようになりました〜 github.com 先日react-reduxがv7.1にアップデートされ、そこでhooks対応の関数がいくつか追加されました。 今回紹介するものは「useSelector」「useDispatch」の2つです。 react-redux v7.1の新機能 useSelector useDispatch connect関数は不要になる v7.1とそれ以前のコードの比較 v7.1以前のTypeScript + react-reduxのコード v7.1以降のTypeScript + react-reduxのコード 全部入りのサンプルコード 万能ではない点に注意 雑感 react-redux v7.1の新機能 useSelector ざっくり説明すると、mapStateToPropsをhooks対応したものです。 useSelecto
Redux-Observable Epic vs Redux-Saga: 何が問題なのか | POSTD
まず、このバトルに関わるには、JavaScriptとReduxの知識が必要です。知識がない人には、このブログ記事は向いていません（話についていけませんから）。残りの人は、一緒に難題を解決していきましょう。 Reduxには、副作用を取り扱うための所定の方法がありません。そう、これは 祝福であると同時に呪いでもあります。 最善策はこれだ、という結論がまだ出ていないので、かなりの数の選択肢が流布しています。SlackやNetflixのような大きな会社がRxJSと Redux-Observable を選んだのに対して、Reactネイティブの開発者たちの間で人気が高いのは Redux Saga です。 うわべを取り繕った記事を書くつもりはなく、道理をわきまえるつもりもありません。私は、この対決を「戦い」に持ち込むつもりなのです。thunkで満足していて、好意的な意見を期待している人は、読まない方がい
さよならボイラープレート。s2sによる高速reduxアプリケーション構築 - Qiita
まだアクションクリエイターを自分で書いているの？ reduxとflowtypeを使ってフロントエンドアプリケーションを構築していると、ボイラープレートが多く、面倒だと感じることがありませんか？ しかし、もはや、このAST時代の前には過去の悩みでしかありません。 型を書く。それが全てです。 型を書いて、定数を書いて、アクションクリエイターを書いて、一つ変更したら全て変更して、もしくはなんらかのハックを行って型付けして、なんてものは過去のことです。 これからは、アクションクリエイターの作成に5秒以上時間をかけたら怠惰でありましょう。そして、これはs2sの1プラグインでしかありません。 プラグインを組み合わせると以下のようなこともできます。 s2s (Source to Source) これを実現している仕組みをSource to Source(s2s)といいます。 ソースコードからソースコード
Reduxで副作用を分離して状態を不変に扱うredux-elm-middlewareを使う - Qiita
Reduxを採用しているアプリケーション向けの記事です。 Reduxの副作用処理で使われるMiddlewareといえば、公式サンプルではredux-thunkが使われていて、redux-sagaもよく使われているという印象があります。 redux-thunkよりredux-sagaが選ばれる理由の１つは、副作用処理を分離でき、ActionCreatorを純粋関数（副作用のない関数）に保てるところかと思います。 redux-thunkではこういうActionCreatorになり、redux-sagaだとこういうActionCreatorになり、加えてこういうSagaを作ります。 redux-thunkでテストを書くとActionCreatorはこういう非同期処理をモックしたコードになり、mapDispatchToPropsはこういうコードになります。 redux-sagaだとActionCr
Redux Patterns and Anti-Patterns
(Korean, Japanese) Redux is a surprisingly simple library for managing application state with a Flux-like architecture. Here at Affirm, we are particularly interested in Redux’s time-travel capabilities. Our core business is offering transparent consumer loans, so it’s incredibly valuable to be able to replay the entire loan application process from the user’s perspective. Redux is more of a set o
Roc - React/Reduxを使ったnodeフレームワーク MOONGIFT
Reactを使ってみたいと思うプログラマはたくさんいると思うのですが、いざちゃんとしたものを作ろうと思うとフレームワークの存在に悩むことになります。Reduxを使うとしてもどういう組み合わせ、ディレクトリ構成でやるのがベストなのか分かりづらかったりします。 そこで使ってみたいのがRocです。React/Reduxを使ったnodeのWebアプリケーションフレームワークです。 Rocの使い方 Rocのインストールはnpmでできます。 npm install -g roc アプリケーションの初期設定はinitを使います。対話型で作ります。 $ roc init web-app-react Found a folder named /path/to/react-app, will try to use it. Using v1.0.3 as template version : ? What's
Redux の Reducer で非同期の状態変更を扱えるように拡張した「Rxdux」について - Qiita
Redux の不満 Fluxの実装であるReduxの不満点のうちの１つとして、Reducerの扱いがある。もちろんReducerの考え方とそれによるStoreの状態管理、およびcombineReducersによる状態の分割統治についてはまあよいのだけれども、Reducerには同期的な状態変化しか扱えない（扱わない）という制約がある。得てして実際のアプリではモックで同期処理で行っていたことでがいつの間にか非同期の処理となったりすることもあり、その場合Reducerで上手くやってたことでもAction Creatorの方に移動しなきゃいけなくなったりする。 Action Creatorsでは現在のState情報を見るのにはgetState()といきなりStateツリー全体にアクセスすることになる。Reducerではうまくできていた分割統治がここでは厳しくなる。なんとかMiddlewareで工夫
React + TypeScript JSX + Reduxで非同期処理を呼ぼう - かずきのBlog@hatena
公式ドキュメントのここらへん。 Async Actions | Redux そもそも 普通のSPAだと、AJAX呼び出しとかで非同期な処理が盛りだくさん。Reduxでどうやるの？という風になるのですが、これが素のReduxのライブラリだけだと難しいということで、redux-thunkというミドルウェアを入れないといけないということです。 もろもろインストール 以下のものをインストールしておきます。 object-assign react react-redux redux redux-thunk 作るもの 足し算アプリを作ります。左辺値と右辺値を入れてボタンを押したら3秒後に足した結果を表示するというものです。setTimeoutでやりますが、まぁ実際はsetTimeoutじゃなくてajax呼び出しのコールバックに置き換わるという感じです。 数字を入力してボタンを押した直後（まだ答えは反映
André Staltz - Some problems with React/Redux
About two years ago I first tried React in a real application. As I started using it extensively in that application, I found it unwieldy and unnecessarily complicated. After that I decided to build my own solutions using RxJS and virtual-dom and after a year or so I created a framework called Cycle.js. Today after two years, I needed to write a large application using React and Redux, because I w
Thinkful | Learn | Thinkful™
Online | Flexible options | Risk-freeStart learning with Thinkful Online learning built to help you launch a career in tech. Try us out risk-free, with no commitment. Apply now to take a free intro course or register for a webinar below. Career Support & An Online Community We go beyond the typical experience of a coding bootcamp. Even though you study completely online, you’ll have the resources
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://github.com/redux-zero/redux-zero/blob/master/README.md
https://github.com/jackielii/simplest-redux-example/blob/master/index.js