Reudx Thunk

Redux ThunkRedux機能を拡張しているミドルウェア

基本的には、Reduxはstoreエaction乙dispatchの同期更新のみをサポートしている.

Redux Thunkミドルウェアはショップ機能を拡張し、動作中にstoreとインタラクティブな非同期ロジックを記述できる

npm i redudx-thunk

Thunkとは?

Thunkとは冷却遅延による関数

// 아래 계산은 즉시 처리
let x = 1 + 2;

// 아래 계산은 calc 함수를 호출할때까지 계산이 지연된다. 
// 그러므로 calc 함수는 Thunk이다. 
let calc = () => 1 + 2;

Eric Raymondは数時間議論してから作成されたので,「考える」という用語の誕生を振り返った.

長所

コード構造が簡単で、運転曲線が低い.

以下のコードはthunkの全て

function createThunkMiddleware(extraArgment) {
  return ({ dispatch, getState }) => (next) => (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extracArgment);
    }
    
    return next(action);
  }
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

短所

他のreudxミドルウェアに比べて提供されていない機能.

1動作で複数回ディスパッチできる全機能

特長

Redux Thunkミドルウェアを使用して、動作生成関数を記述できます.戻りパラメータはdispatchと상태(getState)の伝達関数です.

既存のreduxは動作用のみを対象とし、thunkは動作用を関数とする

遅延動作伝達または特定条件が一致した場合にのみ伝達できる論理を記述してもよい.

同期動作関数dispatchは1つの非同期動作関数で複数回記述できる.

つまり、非同期リクエスト、成功または失敗に関する動作を簡単に記述できるディスパッチロジック

// 비동기 액션 생성 함수
function incrementAsync() {
  // 스토어의 메서드를 매개변수로 전달 받는 함수 반환
  return (dispatch) {
    setTimeout(() => {
      dispatch(increment());
    }, 1000);
  };
}

条件付き派遣処理関数を返すアクション作成関数

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();
    if (counter % 2 === 0) {
      return;
    }
    dispatch(increment());
  }
}

カスタム

Redux Thunk v2.1.0から使用可能withExtraArgument関数挿入カスタム伝達因子

// API 경로
const api = "http://www.example.com/sandwiches/";

const store = createStore(
  rootReducer,
  // api를 Thunk 미들웨어 함수의 3번째 전달인자로 설정
  applyMiddleware(thunk.withExtraArgument(api)),
);

// 사용자 ID를 전달 받아 API를 통해 사용자 정보를 서버에 비동기 요청 후 처리하는 함수
function fetchUser(id) {
  return (dispatch, getState, api) => {
    // 여기서 API를 사용할 수 있습니다.
  };

2以上の因子を渡す場合は対象として渡す.

const api = "http://www.example.com/sandwiches/";

// 다른 데이터
const whatever = 42;

const store = createStore(
  rootReducer,
  // 다수의 전달인자를 설정할 경우 객체로 묶어 전달합니다.
  applyMiddleware(thunk.withExtraArgument({ api, whatever })),
);


function fetchUser(id) {
  return (dispatch, getState, { api, whatever }) => {
    // 여기서 API와 다른 데이터를 사용할 수 있습니다.
  };
}