JSライブラリを1日1つ紹介する
1日1つJSのライブラリを調べます。
① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する
本日は、redux-thunkのドキュメントを読んで実際に業務で使っているところを調べました。
ドキュメント
今回読んだドキュメントはこちらです。
github.com
Philosophy、Motivation、Back Story
GitHub - reduxjs/redux-thunk: Thunk middleware for Redux
Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.
Redux Thunk middlewareを使うと、Actionではなく関数を返すAction Creatorsを作成できます。thunkはActionのdispatchを遅延したり、特定の条件が満たされた場合にのみdispatchできます。内部関数は、パラメーターとしてstore methods dispatchとgetStateを受け取ります。
なるほどわからない...(´；ω；`)
実際に使ってみる
何もわからないのでこれをじっくり読みました。
GitHub - reduxjs/redux-thunk: Thunk middleware for Redux
With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extend the store's abilities, and let you write async logic that interacts with the store.
Thunks are the recommended middleware for basic Redux side effects logic, including complex synchronous logic that needs access to the store, and simple async logic like AJAX requests.
普通にRedux使うだけだとAction→dispatchで同期更新しかできないけど、このライブラリを使うと非同期で通信できるよ！ってことみたいです。
JavaScriptの非同期処理については、このQiitaがわかりやすかったです！
非同期処理ってどういうこと？JavaScriptで一から学ぶ - Qiita
Motivationに書いてあった、
> The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met.
は非同期処理って意味だったんですね。ちょっと理解した(´；ω；`)
3行以内でまとめる
redux-thunkを導入すると、
- Reduxで非同期処理ができるよ\( ˆoˆ )/
以上です！
