Returning Promises instead of data - reactjs

Question

I've had a great deal of frustration lately when I was trying to use axios to fetch data from a localhost withing a React/Redux bookstore project.The reason why I used axios is to connect the App to a rails api(backend) and try to update the store from the DB whenever it is needed(namely the list of books). However, when I try to pass the response.data(array of books) of the api axios call to the Action Creator I get a Promise in the React component.
Book List Component
import React from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
import Book from '../components/book';
import { removeBookAction, getBooksAction } from '../actions/index';
class BookList extends React.Component {
UNSAFE_componentWillMount() {
this.props.getBooks();
}
render() {
const { books, handleRemoveBook } = this.props;
console.log(books) // prints Promise {<resolved>: Array(12)} :(
return (
<tbody>
{books.length > 0 ? books.map((book) => (
<Book key={book.id} item={book} handleRemoval={handleRemoveBook} />
))
: (
<tr>
<td>Empty List</td>
</tr>
)}
</tbody>
);
}
}
const displayableBooks = (books, theFilter) => {
//console.log(books)
if (theFilter === 'All') {
return books;
}
return books.filter(item => item.category === theFilter);
};
// inject store state as props to Booklist component
const mapStateToProps = (state) => {
return {
books: displayableBooks(state.books, state.filter),
};
};
const mapDispatchToProps = (dispatch) => ({
handleRemoveBook: (book) => {
dispatch(removeBookAction(book));
},
getBooks: () => axios.get('api/v1/books').then(response => {
dispatch(getBooksAction(response.data));
}),
});
BookList = connect(mapStateToProps, mapDispatchToProps)(BookList);
export default BookList;
Books Action creators
const creatBookAction = (book) => {
return {
type: 'CREATE_BOOK',
book,
}
};
const removeBookAction = (book) => ({
type: 'REMOVE_BOOK',
id: book.id,
});
const getBooksAction = (books) => {
return {
type: 'GET_BOOKS',
books,
};
}
const changeFilterAction = (filter) => ({
type: 'CHANGE_FILTER',
filter,
});
export { creatBookAction, removeBookAction, changeFilterAction, getBooksAction };
Books Reducer
const CREATE_BOOK = 'CREATE_BOOK';
const REMOVE_BOOK = 'REMOVE_BOOK';
const GET_BOOKS = 'GET_BOOKS';
const booksReducer = async (state = [], action) => {
switch (action.type) {
case CREATE_BOOK:
return [
...state,
{ ...action.book },
];
case REMOVE_BOOK:
const index = state.findIndex((value) => value.id === action.id);
return state.slice(0, index).concat(state.slice(index + 1));
case GET_BOOKS:
return action.books;
default:
return state;
}
};
export default booksReducer;
As you can see the code above, I am trying to create some sort of synchronization between the Redux store and the DB, but I am stuck at the fist step (i.e getting the data). I am a beginner with React/Redux and axios, so please consider explaining other alternatives if my approach (which is a combination of other approaches mentioned in tutorials) is inefficient of impossible to apply. Thanks :)

Answer 1

I realized that I made a grave mistake. The reason why I am getting a promise instead of the actual data is because of my books reducer. I made it an asynchronous function which I suppose will inevitably return a promise.

Answer 2

You should use a middleware to make async call action like redux thunk
const mapDispatchToProps = (dispatch) => ({
handleRemoveBook: (book) => {
dispatch(removeBookAction(book));
},
getBooks: () => dispatch(fetchBooksAction());
});
Here your async action
const fetchBooksAction = () => (dispatch) => {
axios.get('api/v1/books').then(response => {
dispatch(getBooksAction(response.data);
});
}