Redux thunkの反応を理解する例によるJS

あなたが反応開発者であるならば、あなたはあなたのプロジェクトで州を使用しなければなりません.国家なしの反応プロジェクトはない.状態は、コンポーネントのインスタンスとして定義されます.コンポーネントの動作を制御するオブジェクトです.
この記事では、Redux Thunkについて学びます.js国家管理は、反応で最も重要な概念のうちの1つです.
これは、Java開発者シリーズの私の反応の第3部であり、我々は反応のステートメント管理に焦点を当てている過去2つの記事で、我々はどのように使用する方法を見ているstate using Redux and useState hooks . あなたがまだそれらをチェックしていない場合は、すぐに反応コアの概念を学ぶために今それらをチェックすることができます.
反応は、国家のためのサポートを構築しています.しかし、アプリケーションが成長するにつれて、内蔵の機能を使用して状態を管理することは困難になります.
したがって、大きなアプリケーションでは、サードパーティ製のライブラリがグローバル状態を管理するために使用されます.Reduxは、最も人気のある一般的な状態管理ライブラリです.しかし、この記事の焦点はreduxではありません.それは「redux thunk」です.
Redux Thunk反応アプリケーションの状態を管理するために使用されます.この記事では、我々はどのようなredux thunkを議論し、なぜ我々はそれを使用する必要があります.
あなたが反応する上で完全な初心者ならば、心配しないでくださいbest React courses and books , だけでなくThe React Developer RoadMap , これは、すべてのツール、ライブラリを提供し、リソースは、熟練した反応開発者になる必要があります.あなたはそれらのリソースを介して反応を学ぶために行くことができます.ゼロからのJS.

非同期機能ミドルウェア

反応+ Reduxアプリケーションの減速器を書くの基本的なルールは、副作用を持ってはならないということです.副作用は、機能の範囲にない何かを変えることができる何かです.HTTPコールの作成は副作用の一例です.
HTTP呼び出しは副作用ですが、Webアプリケーションの重要な部分です.我々は減速機でHTTPの呼び出しを行うことはできませんが、我々はそれのためのミドルウェアを作成することができます.このような状況を処理するには、async関数のミドルウェアを作成する必要があります.
我々は、非同期機能のミドルウェアを書くことができますが、反応はすでに提供しています.redux thunkはasync関数のミドルウェアに過ぎません.

どのようなredux thunkですか？

基本的に、redux thunkは、HTTP呼び出しなどの非同期ロジックを扱うことができる関数を書くことができます.そのような機能では、我々は行動を派遣し、また、アプリケーションの状態にアクセスすることができます.でもどうやって?Thunkミドルウェアには、2つの引数- dispatchとgetstateがあります.
redux thunkを使用するには、ノードパッケージマネージャを使用してインストールする必要があります.NPM ).

npm install redux-thunk

インストール後、「ファイル」の「redux thunk」から「ThunkMiddleware」をインポートする必要があります.覚えておいてください、ストアには、機能にThunkミドルウェアを渡す機能があります.このためには、以下のように「ApplyMiddleware」を使用する必要があります.

import { createStore, applyMiddleware } from 'redux';

import { composeWithDevTools } from 'redux-devtools-extension';

import thunkMiddleware from 'redux-thunk';

const enhancer = composeWithDevTools(applyMiddleware(thunkMiddleware));

const store = createStore(reducer, enhancer);

This is how we can apply "thunkMiddleware" to the store. Now let's see how we can write a thunk function.

export async function getData(dispatch, getState) {

const res = await client.get('/getdata')

    dispatch({ type: 'RES_DATA', payload: res.data })

}

「getdata」は、thunkミドルウェア機能です.ディスパッチとgetstateの2つのパラメータがあります.関数の最後の行では、dispatchを使って必要なアクションを送ります.
ここで何が起こったのですか.我々が作成したミドルウェア機能は、データを提供する非同期のHTTP呼び出しを処理することです.
redux thunkを持っていないなら、どこでこのロジックを書くべきですか?副作用を持つことができないので、我々は直接それを還元器で、そして、行動の中に書くことができません.それで、我々は我々が非同期論理を書くことができるredux thunkミドルウェアを持っています.
以前に我々はディスパッチ機能にミドルウェア機能を渡すために店に能力を与えた覚えていますか?次のコード行を観測します.javascript
store.dispatch(getData);
`
上記のコードがアプリケーションのどこかで実行されると、“getdata”関数が呼び出されます.この時点では、何も動作しない.したがって、「getdata」関数でHTTP呼び出しをするのは全く良いです.
呼び出しがなされて、応答が受け取られるとき、Redux Thunkによって提供された「派遣」機能は必要な行動を発送することができます.ここから、通常のReduxフローは状態を更新し続けることができます.
したがって、これはReduxのthunkは、状態を管理するためにreduxを使用している反応アプリケーションで便利です.それが副作用を持つことができるように、Thunkミドルウェアは行動も還元もありません.さらに、それは、私たちにそれぞれ行動とアクセス状態を発送させる派遣とgetstate機能を提供します.
それはredux thunkのすべてです.Reduxをあなたの反応アプリケーションで使うつもりならば、あなたはRedux Thunkの働きを理解しなければなりません.それはあなたが効率的に副作用を管理するのに役立つ非常に有用な概念です.だからこの記事を通過し、Reduxと独自の反応アプリケーションを作成し、それをより明確にコンセプトを理解するためにRedUx thunkを実装します.
その他の反応チュートリアルとリソースを探索することがあります

Top 5 Websites to learn React.js for Beginners

My favorite books to learn React.js in 2021

The React Developer RoadMap

My favorite free Courses to learn Angular and React

5 Best courses to learn React Native in 2021

The 2021 Frontend and Backend Developer RoadMap

5 Courses to Learn Ruby and Rails for Free

5 Online training courses to learn Angular for Free

5 Courses to learn Object-Oriented Programming for Free

10 Courses to learn AWS for beginners

10 Books and Courses to learn Angular

5 Free Courses to learn Kubernetes in 2021

5 Free Docker Courses for Java and DevOps Engineer

3 Books and Courses to Learn RESTful Web Services in Java

今までこの記事を読んでくれてありがとう.これらのフリー反応フレームワークコースのような場合は、お友達や同僚と共有してください.ご質問やご意見がある場合は、コメントをドロップしてください.
あなたが反応とJavascriptの上で完全な初心者であるならば、私もあなたがこれらをチェックすることを提案しますfree JavaScrpt courses 最初の反応にジャンプする前に.jsそれはあなたが読書を理解し、コードを理解するとき、特に多くの時間を節約します.一度これらを使用することができますfree React.js コースは、ゼロから反応学習を開始します.