redux-async-thunk

Expension for thunk middleware for redux to enable async/await or generator/yield flow. No need to install thunk middleware, it is supported as well.

installation

1npm install redux-async-thunk --save

usage

Apply redux-async-thunk middleware

1import { createStore, applyMiddleware } from 'redux';
2import asyncThunk from 'redux-async-thunk';
3import reducers from './reducers/index';
4
5const store = createStore(
6  reducers,
7  applyMiddleware(asyncThunk)
8);

On action

1function getSomeData(){
2  return async function(dispatch, getState){
3    let data = await fetch('http://exampleurl.com/data');
4    dispatch({type: 'MY_ACTION_TYPE', data});
5  }
6}

Or

1function getSomeData(){
2  return function* (dispatch, getState){
3    let data = yield fetch('http://exampleurl.com/data');
4    dispatch({type: 'MY_ACTION_TYPE', data});
5  }
6}

Or the original thunk way

1function getSomeData(){
2  return function(dispatch, getState){
3    fetch('http://exampleurl.com/data').then(data => {
4      dispatch({type: 'MY_ACTION_TYPE', data});
5    });    
6  }
7}