Reudx Thunk

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

npm i redudx-thunk

Thunkとは?

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

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

長所

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;

短所

特長

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

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

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

カスタム

// 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를 사용할 수 있습니다.
  };

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와 다른 데이터를 사용할 수 있습니다.
  };
}