npm install --save redux-thunk

import ReduxThunk from 'redux-thunk' // no changes here 😀

var ReduxThunk = window.ReduxThunk.default

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
 
function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}
 
function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

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

// calculation of 1 + 2 is immediate
// x === 3
let x = 1 + 2;
 
// calculation of 1 + 2 is delayed
// foo can be called later to perform the calculation
// foo is a thunk!
let foo = () => 1 + 2;

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
 
// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
 
// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);
 
function fetchSecretSauce() {
  return fetch('https://www.google.com/search?q=secret+sauce');
}
 
// These are the normal action creators you have seen so far.
// The actions they return can be dispatched without any middleware.
// However, they only express “facts” and not the “async flow”.
 
function makeASandwich(forPerson, secretSauce) {
  return {
    type: 'MAKE_SANDWICH',
    forPerson,
    secretSauce
  };
}
 
function apologize(fromPerson, toPerson, error) {
  return {
    type: 'APOLOGIZE',
    fromPerson,
    toPerson,
    error
  };
}
 
function withdrawMoney(amount) {
  return {
    type: 'WITHDRAW',
    amount
  };
}
 
// Even without middleware, you can dispatch an action:
store.dispatch(withdrawMoney(100));
 
// But what do you do when you need to start an asynchronous action,
// such as an API call, or a router transition?
 
// Meet thunks.
// A thunk is a function that returns a function.
// This is a thunk.
 
function makeASandwichWithSecretSauce(forPerson) {
 
  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.
 
  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}
 
// Thunk middleware lets me dispatch thunk async actions
// as if they were actions!
 
store.dispatch(
  makeASandwichWithSecretSauce('Me')
);
 
// It even takes care to return the thunk’s return value
// from the dispatch, so I can chain Promises as long as I return them.
 
store.dispatch(
  makeASandwichWithSecretSauce('My wife')
).then(() => {
  console.log('Done!');
});
 
// In fact I can write action creators that dispatch
// actions and async actions from other action creators,
// and I can build my control flow with Promises.
 
function makeSandwichesForEverybody() {
  return function (dispatch, getState) {
    if (!getState().sandwiches.isShopOpen) {
 
      // You don’t have to return Promises, but it’s a handy convention
      // so the caller can always call .then() on async dispatch result.
 
      return Promise.resolve();
    }
 
    // We can dispatch both plain object actions and other thunks,
    // which lets us compose the asynchronous actions in a single flow.
 
    return dispatch(
      makeASandwichWithSecretSauce('My Grandma')
    ).then(() =>
      Promise.all([
        dispatch(makeASandwichWithSecretSauce('Me')),
        dispatch(makeASandwichWithSecretSauce('My wife'))
      ])
    ).then(() =>
      dispatch(makeASandwichWithSecretSauce('Our kids'))
    ).then(() =>
      dispatch(getState().myMoney > 42 ?
        withdrawMoney(42) :
        apologize('Me', 'The Sandwich Shop')
      )
    );
  };
}
 
// This is very useful for server side rendering, because I can wait
// until data is available, then synchronously render the app.
 
store.dispatch(
  makeSandwichesForEverybody()
).then(() =>
  response.send(ReactDOMServer.renderToString(<MyApp store={store} />))
);
 
// I can also dispatch a thunk async action from a component
// any time its props change to load the missing data.
 
import { connect } from 'react-redux';
import { Component } from 'react';
 
class SandwichShop extends Component {
  componentDidMount() {
    this.props.dispatch(
      makeASandwichWithSecretSauce(this.props.forPerson)
    );
  }
 
  componentDidUpdate(prevProps) {
    if (prevProps.forPerson !== this.props.forPerson) {
      this.props.dispatch(
        makeASandwichWithSecretSauce(this.props.forPerson)
      );
    }
  }
 
  render() {
    return <p>{this.props.sandwiches.join('mustard')}</p>
  }
}
 
export default connect(
  state => ({
    sandwiches: state.sandwiches
  })
)(SandwichShop);

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument(api))
)
 
// later
function fetchUser(id) {
  return (dispatch, getState, api) => {
    // you can use api here
  }
}

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument({ api, whatever }))
)
 
// later
function fetchUser(id) {
  return (dispatch, getState, { api, whatever }) => {
    // you can use api and something else here
  }
}