How to make AJAX request in redux

Question

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.

Action

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;     })   }; } 

Reducer

import {GET_BOOK} from '../actions/books';  const booksReducer = (state = initialState, action) => {   switch (action.type) {     case GET_BOOK:       return state;     default:       return state;   } };  export default booksReducer; 

Container How display data in container?

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: () => 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 (       <div>         <Link to={`/authors`}><MUIButton style="flat">All Authors</MUIButton></Link>         <ul>           {books.map((book, index) =>             <li key={index}>               <Link to={`/book/${book.name}`}><MUIButton style="flat"><div class="mui--text-black mui--text-display4">                 "{book.name}"</div></MUIButton></Link>               <Link to={`/author/${book.author}`}><MUIButton style="flat"><div class="mui--text-black mui--text-display4">                 {book.author}</div></MUIButton></Link>             </li>           )}         </ul>       </div>     );   } }  export default booksPage; 

Answer 1

Since you are already using redux you can apply redux-thunk middleware which allows you to define async actions.

Installation & usage: Redux-thunk

export function fetchBook(id) {  return dispatch => {    dispatch(setLoadingBookState()); // Show a loading spinner    fetch(`/book/${id}`, (response) => {      dispatch(doneFetchingBook()); // Hide loading spinner      if(response.status == 200){        dispatch(setBook(response.json)); // Use a normal function to set the received state      }else {         dispatch(someError)      }    })  } }  function setBook(data) {  return { type: 'SET_BOOK', data: data }; } 

Answer 2

You should use Async Actions described in Redux Documentation

Here an example of reducer for async action.

const booksReducer = (state = {}, action) => {   switch (action.type) {     case 'RESOLVED_GET_BOOK':       return action.data;     default:       return state;   } };  export default booksReducer; 

and then you create your Async Action.

export const getBook() {   return fetch('/api/data')     .then(response => response.json())     .then(json => dispatch(resolvedGetBook(json))) }  export const resolvedGetBook(data) {   return {     type: 'RESOLVED_GET_BOOK',     data: data   } } 

Several Notes:

• We could return Promise (instead of Object) in action by using redux-thunk middleware.
• Don't use jQuery ajax library. Use other library specifically for doing that (e.g. fetch()). I use axios http client.
• Remember, in redux you only use pure function in reducer. Don't make ajax call inside reducer.
• Read the complete guide from redux docs.