タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに （2020.4.23 簡単な例を追加、Tight Coupling関連の記述を修正しました。） 昔ReactとReduxを触ったこと全然ないので、インターンはじめて以来、ただ「こういう風に書くもの」、「このように書くのは正しい」としか認識していない状況でした。そもそもどの部分が redux-thunk なのかも全然分かってません。 なので、今回は redux-thunk 公式に推奨されてる文章を読んで、自分なりに理解した後、記録してみます。 全文を翻訳するわけではないので、詳細はそちらに参照していただければと思います。 ライブラリーは何故作られたのか、どういう問題を解決したのか、それを理解するのはやはり大事なことだと思います。 Thunkとは 一般的にいうと、functional programmingのテックニックの一つで、そのまま関数Aを利用するのではなく、まず関数Bに変数を
Redux Toolkitの構成技術を触ってみた（reselect・Immer・Redux Thunk） - パンダのプログラミングブログ
Redux Toolkitとは、Reduxのエコシステムの集大成である Redux ToolkitはReduxのエコシステムから選りすぐりの技術を集大成したライブラリ。単にReduxのボイラープレートを減らすだけのライブラリではない。 以下ではRedux Toolkitの構成要素となるライブラリの基本的な使い方を確認していく。注意して頂きたいのは、以下の記述はRedux Toolkitでの書き方ではない点だ（それなら公式ドキュメントをご覧いただくのが一番である）。 複雑なものに遭遇したときは常に基本に立ち返るのが一番だ。 reselect: Storeから値を取得する処理をメモ化する reselectは関数をメモ化をする、1ファイル100行程度の薄いライブラリ。Storeから必要な値を取得するためのロジックを記述する。使い方はテストを見てもらうのが良い（memoized composite
前回の記事では同期的なTODOアプリを例としてReact + Reduxの基本的な使い方を学びなおしました。 今回は非同期処理の扱い方を勉強してサンプルのアプリケーションを作ったので、要点などをメモしておきます。 Reduxでの非同期処理について 実際のアプリケーションではAPI通信など非同期処理が必ずと言っていいほど入ってくると思います。 たとえば fetch() を使って何かデータを取ってくる Action creator を定義したいとします。 const fetchSomeThing = (url) => { return fetch(url) .then(res => res.json()) .then(json => { return { type: 'FETCH_DATA', payload: { response: json } } }); }; fetchSomeThin
Redux-Thunkとは Redux-Thunkとは、ReduxのAction Creatorに非同期処理を実装するためのミドルウェアです。 何ができるの？ Reduxにおける最も一般的なミドルウェアの使い方は非同期Actionの処理です。 Reduxでは基本的に、Action Creatorによって生成されたActionをStoreにディスパッチすることで単純な同期更新を行っています。そこにRedux-Thunkのようなミドルウェアを導入することでStoreの機能を拡張し、非同期ロジックを記述できるようにできます。 通常Action CreatorはActionオブジェクトを返しますが、Redux-Thunkを使用すると「Thunk」という関数を返すことができるようになります。これによってActionのディスパッチを遅らせたり、特定の条件が満たされた場合のみディスパッチできるようになり
Reactでの非同期通信処理の方法 Reduxのミドルウェアを使って実装します ※ Reactのコンポーネント内で処理する方法もありますが、コンポーネントと通信処理が密結合になってコンポーネントのソースが複雑になり、可読性が下がるなどの理由で採用されるケースはあまりないためこの方法はとりません redux-sagaとredux-thunkの比較 非同期通信処理の代表である redux-sagaとredux-thunkについて比較してみます 上図のように、redux-thunkを導入すると、action creatorの中に非同期通信処理を書いたり、action creatorからさらに別のaction creatorをcallすることができるようになります。 そのため、本来の reduxのアーキテクチャの形から逸脱することになり、記述の自由度が上がり開発者各々が書くことでソースコードの可読
この記事は React Advent Calendar 13日目の記事です。 皆さん、react-redux の hooks を使っていますか？ react-redux は v7.1 より useDispatch useSelector などいくつかの hooks が導入されました。 界隈ではどちらかというと、mapStateToProps の冗長さを置き換えるもの、あるいは Container / Presentation コンポーネント の区別を不要にするものとして注目されている感があります。実際、useSelector によって可能になった設計論は重要です。 しかし本記事ではそれらと違う観点、つまり「設計に失敗した Redux を立て直すための武器として react-redux の hooks がスゴい！」という方向からの解説を行います。 以下、redux のミドルウェアとして re
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
redux-thunk入門、簡単まとめ - Qiita
Redux-thunkを使ったReduxの非同期処理 - KDE BLOG
Redux-Thunkで非同期処理ができる仕組みを理解しよう - Qiita
Reactでredux-sagaで非同期通信 〜redux-thunkとの比較も〜 - Qiita
駄目になった Redux Thunk を hooks でリファクタリングする
note.com/offtopic
tonarinoyj.jp
qiita.com/ho_na
qiita.com/orc_jj
prtimes.jp
qiita.com/k12da