title: How to make AJAX request in redux
body: <p>For all I know, I have to write request in action create. How to use  a promise in action for submitting a request? I am getting data in action. Then new state is created in reducer. Bind action and reducer in connect. But I don't know how to use promise for request.</p>
  
  <p><strong>Action</strong> </p>
  
  <pre><code>import $ from 'jquery';
  export const GET_BOOK = 'GET_BOOK';
  
  export default function getBook() {
    return {
      type: GET_BOOK,
      data: $.ajax({
        method: "GET",
        url: "/api/data",
        dataType: "json"
      }).success(function(data){
        return data;
      })
    };
  }
  </code></pre>
  
  <p><strong>Reducer</strong></p>
  
  <pre><code>import {GET_BOOK} from '../actions/books';
  
  const booksReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case GET_BOOK:
        return state;
      default:
        return state;
    }
  };
  
  export default booksReducer;
  </code></pre>
  
  <p><strong>Container</strong>
  How display data in container?</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  import { connect } from 'react-redux';
  import getBook  from '../actions/books';
  import Radium from 'radium';
  import {Link} from 'react-router';
  
  function mapStateToProps(state) {
    return {
      books: state.data.books,
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      getBooks: () =&gt; dispatch(getBook()),
    };
  }
  
  @Radium
  @connect(mapStateToProps, mapDispatchToProps)
  class booksPage extends Component {
    static propTypes = {
      getBooks: PropTypes.func.isRequired,
      books: PropTypes.array.isRequired,
    };
  
    render() {
      const {books} = this.props;
      return (
        &lt;div&gt;
          &lt;Link to={`/authors`}&gt;&lt;MUIButton style="flat"&gt;All Authors&lt;/MUIButton&gt;&lt;/Link&gt;
          &lt;ul&gt;
            {books.map((book, index) =&gt;
              &lt;li key={index}&gt;
                &lt;Link to={`/book/${book.name}`}&gt;&lt;MUIButton style="flat"&gt;&lt;div class="mui--text-black mui--text-display4"&gt;
                  "{book.name}"&lt;/div&gt;&lt;/MUIButton&gt;&lt;/Link&gt;
                &lt;Link to={`/author/${book.author}`}&gt;&lt;MUIButton style="flat"&gt;&lt;div class="mui--text-black mui--text-display4"&gt;
                  {book.author}&lt;/div&gt;&lt;/MUIButton&gt;&lt;/Link&gt;
              &lt;/li&gt;
            )}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default booksPage;
  </code></pre>