Example: Redux-thunk

app-single.jsx

import React, { Component, PropTypes } from 'react';
import { render } from 'react-dom';
import { createStore, combineReducers, bindActionCreators, applyMiddleware } from 'redux'
import { Provider, connect } from 'react-redux'

import thunkMiddleware from 'redux-thunk'
// We need only two things: add 'thunk' and create async action (see bellow)

// "External" async function
// =========================
const FetchTextAsync = () => {
  return new Promise( function(resolve, reject){ 
    setTimeout(
      ()=>resolve('Hello Asyncs!')
      ,1000
    )
  })
}

// Actions creators
// ================

// Sync action creator
const setTextAction = (payload) => {
  return {
    type: 'SET_TEXT',
    payload
  }
}

// Async "action creator" - thunk wrapper
const setTextAsync = () => {
  return (dispatch) => {
    return FetchTextAsync().then(
      result => dispatch(setTextAction(result)),
      error => dispatch(setTextAction('ERROR'))
    )
  }
}

// Reducer and so on
// =================
const textInitialState = {
  text: 'Hello World'
};

function textReducer(state = textInitialState, action) {
  switch (action.type) {
    case 'SET_TEXT':
      return { ...state, text: action.payload }

    default:
      return state;
  }
}

const rootReducer = combineReducers({
    textReducer
})

const middlewares = [thunkMiddleware];

// Add logger middleware only when in development
if (process.env.NODE_ENV === 'development') {
    const loggerMiddleware = require('redux-logger')();

    middlewares.push(loggerMiddleware);
}

const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);

const store = createStoreWithMiddleware(
  rootReducer,
  // initialState,
)

class Root extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <div>
            <div>{this.props.text}</div>
            <input type="button" value="Change Text" onClick={()=>this.props.doAction('Hi There!')}/>
            <input type="button" value="Change Text Async" onClick={()=>this.props.doActionAsync('Hi There!')}/>
        </div>
    }
}

function mapStateToProps (state) {
  return {
    text: state.textReducer.text,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    doAction: bindActionCreators(setTextAction, dispatch),
    doActionAsync: bindActionCreators(setTextAsync, dispatch)
  }
}

const ConnectedRoot = connect(mapStateToProps, mapDispatchToProps)(Root)

ConnectedRoot.propTypes = {
  text: PropTypes.string,//.isRequired,
  user: PropTypes.string
}

render(
    <Provider store={store}>
        <ConnectedRoot/>
    </Provider>,
document.getElementById('root')
);