redux-thunk

utility

redux-thunk는 Redux의 미들웨어로, 액션 생성자에서 비동기 작업을 쉽게 처리할 수 있게 해줍니다. 이 라이브러리를 사용하면 액션 대신 함수를 반환할 수 있으며, 이 함수는 dispatch와 getState를 인자로 받아 필요한 비동기 로직을 실행한 후 액션을 디스패치할 수 있습니다.

Latest Ver 3.1.0

Homepage

Github

17,767

📢 redux-thunk는 비동기 액션을 관리하기 위한 Redux 미들웨어입니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/3.1.0/redux-thunk.legacy-esm.js

https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/3.1.0/redux-thunk.legacy-esm.min.js

https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/3.1.0/redux-thunk.d.ts

https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/3.1.0/redux-thunk.mjs

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<div id='example'>
  <p>Loading...</p>
</div>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.3.0/redux-thunk.min.js"></script>

⚙️ JavaScript
function fetchData() {
  return function(dispatch) {
    setTimeout(() => {
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: 'Hello from Redux Thunk!' });
    }, 1000);
  };
}

function reducer(state = { message: '' }, action) {
  switch (action.type) {
    case 'FETCH_DATA_SUCCESS':
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

const store = Redux.createStore(reducer, Redux.applyMiddleware(ReduxThunk.default));
store.subscribe(() => {
  const state = store.getState();
  document.getElementById('example').innerHTML = '<p>' + state.message + '</p>';
});
store.dispatch(fetchData());