Redux-thunk

redux−thunkは反応器における非同期動作を処理するための中間部品である.
前述したように、ミドルウェアは、リダイレクタが動作を処理する前に実行される関数である.アクションシーンでは直接再放送にジャンプできますが、そうしない理由は

デバッグ目的

サーバに異常を送信する宛先

.

動作処理をしばらく遅らせるため
あります.
2つ目の目的に近いのはredux-thunkdです
redux-thunkは、オブジェクトを作成するのではなく、アクション作成関数を作成するのに役立ちます.

ミドルウェアこうぞう

const middleWare = store => next => action => next(action)

= //같습니다.
 
const middleWare = function(store) { //리덕스 스토어 인스턴스
	return function(next) { // 다음 처리해야할 미들웨어에게 액션 넘겨줌
    	return function(action) {
        	return next(action)
        }
    }
}

Thunk?

特定のタスクの完了を遅らせるために関数で囲まれます.

store:createStoreを使用して作成されたショップを指します.このstoreはcompose、dispatch(action)、subscribe(listener)という3つのメソッドのオブジェクトです.

next:複数のミドルウェアを使用する場合、nextは次のミドルウェアを導入します.
ミドルウェアがない場合はdispatch()関数が入力されます.
next(action)を実行する場合は、Reducerに渡すか、次のミドルウェアが処理されていることを確認します.

Action:アクションオブジェクト

redux- thunk

thunkを使用して保存できます.関数はdistparthのパラメータに渡すことができます.

store.dispatch((dispatch, getstate) => {
	dispatch({ type: something})
})

我々はredux−thunkを非同期処理のために学習した.この非同期処理には、パラメータを関数に渡す必要があります.そのため、ミドルウェアとは何かを上から知りました.
オブジェクト作成

同期動作

export functin addTodo(title) {
	return {
    	type : something
      	payload : {
    		id: choi
    	}
    }
}

オブジェクト作成

非同期動作

export function asyncAddTodo(title) {
	return (dispatch, getState) => {
   		setTimeout(() => {
        	dispatch(addTodo(title))
        }, 5000); 	
    }
}

返される関数には、パラメータとしてdispatch関数とgetState関数があります.

getState関数

getState関数は、ショップ内の関数のようにすべての状態を返します.
したがって、すべてのステータスを参照し、アクションアクチュエータの処理を簡略化できます.

（1）取付

npm install --save redux-thunk

(2) import

redux-thunkをreduce設定コードを作成したファイルからインポートし、reduceのミドルウェアとして適用します.

import { createStore, applyMiddleware } from 'redux';
//redux에서 createStore와 applyMiddleware를 import
// 그리고 'thunk' 미들웨어도 import
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// createStore는 마지막 인자로 "store enhancer"를 전달 받습니다.
// 여기서 우리는 applyMiddleware를 사용해서 썽크 미들웨어를 기반으로 헌 store enhancer를 생성하여 인자로 전달해줍니다.
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

applyMiddleware

import {createStore, applyMiddleware } from 'redux'; //createStore와 같이 import

const store = createStore(reducer, applyMiddleware('미들웨어'))

（2）応用

store.js

import { createStore, applyMiddleware } from 'redux';
import modules from './modules';

import { createLogger } from 'redux-logger';
import ReduxThunk from 'redux-thunk';

const logger = createLogger(); 
// 객체가 들어옵니다.
const store = createStore(modules, applyMiddleware(logger, ReduxThunk))

export default store;

applyMiddlewareを使用して、RidexをcreateStore()に接続します.

(3)Thunk生成関数

counter.js

export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);

// 1초 뒤에 increase 혹은 decrease 함수를 디스패치함
export const increaseAsync = () => dispatch => {
    setTimeout(() => {
        dispatch(increase());
    }, 1000);
};
export const decreaseAsync = () => dispatch => {
    setTimeout(() => {
        dispatch(decrease());
    }, 1000);
};

ソース

https://ahnanne.tistory.com/6
https://lechuck.netlify.app/study/Redux3/
https://velopert.com/3401
https://lechuck.netlify.app/study/Redux3/