redux-thunk

utility

redux-thunk is a middleware for Redux that enables easy handling of asynchronous operations within action creators. By using this library, action creators can return a function instead of an action. This function can then perform any asynchronous logic required and dispatch an action when ready.

Latest Ver 3.1.0

Homepage

Github

17,767

📢 redux-thunk is a middleware for managing asynchronous actions in Redux.

CDN Download

License: MIT

Asset Type :

View All Versions

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

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 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());