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
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 };
}
Attribution
Source : Link , Question Author : Disa Skolzin , Answer Author : Jens