trouble setting up redux thunk - redux

Question

I have the following action creator:
export function selectBook(ISBN, dispatch) {
const url = `${ROOT_ITEMS_URL}/${ISBN}?all=true`;
dispatch({ type: 'SELECT_BOOK_LOADING', isLoading:true });
axios.get(url)
.then(({ data }) => dispatch({ type: 'SELECT_BOOK_SUCCESS', data}))
.catch(( err ) => dispatch({ type: 'SELECT_BOOK_FAILURE', isLoading:false}))
}
I also have the following in my main index file for my project:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import LoginLayout from './layouts/LoginLayout';
import reducers from './reducers';
import ReduxPromise from 'redux-promise';
import reduxThunk from 'redux-thunk';
const createStoreWithMiddleware = applyMiddleware(ReduxPromise, reduxThunk)(createStore);
//const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<LoginLayout />
</Provider>
, document.querySelector('.root'));
I am confused on how to get dispatch called into my project. I am getting the following error:
bundle.js:5690 Uncaught TypeError: dispatch is not a function
When I call this function I am not passing any dispatch. But I am not sure how to call dispatch into it. Is it a redux call I need to make with my function call?
this.props.selectBook(params.bookID);
Should it be this instead?:
this.props.selectBook(params.bookID, dispatch);
and what import is dispatch with? import dispatch from 'redux'?

Answer 1

dispatch is given to you for free via redux-thunk. The trick here is that your action creator should return a function, and the first argument to the function will be dispatch. Your action creator will end up looking like this:
export function selectBook(ISBN) {
return dispatch => {
const url = `${ROOT_ITEMS_URL}/${ISBN}?all=true`;
dispatch({ type: 'SELECT_BOOK_LOADING', isLoading:true });
axios.get(url)
.then(({ data }) => dispatch({ type: 'SELECT_BOOK_SUCCESS', data}))
.catch(( err ) => dispatch({ type: 'SELECT_BOOK_FAILURE', isLoading:false}))
}
}

Answer 2

Try to do your action creator like that:
export function selectBook(ISBN) {
const url = `${ROOT_ITEMS_URL}/${ISBN}?all=true`;
return dispatch => {
dispatch({ type: 'SELECT_BOOK_LOADING', isLoading:true });
axios.get(url)
.then(({ data }) => dispatch({ type: 'SELECT_BOOK_SUCCESS', data}))
.catch(( err ) => dispatch({ type: 'SELECT_BOOK_FAILURE', isLoading:false}))
}
}
It needs to return function