Redux ~ Thunk - rohit120582sharma/Documentation GitHub Wiki

Usually, for any asynchronous API request you'll want to dispatch at least three different kinds of actions:

The reducers may handle this action by toggling an isFetching flag in the state. This way the UI knows it's time to show a spinner.

The reducers may handle this action by merging the new data into the state they manage and resetting isFetching. The UI would hide the spinner, and display the fetched data.

The reducers may handle this action by resetting isFetching. Additionally, some reducers may want to store the error message so the UI can display it.

{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

By default, Redux doesn’t support asynchronous actions like fetching data, so here’s where we utilise Redux Thunk. Thunk allows you to write action creators that return a function instead of an action. This way, the action creator becomes a thunk.

The inner function can receive the store's methods dispatch and getState as parameters.

When an action creator returns a function, that function will get executed by the Redux Thunk middleware. This function doesn't need to be pure; it is thus allowed to have side effects, including executing asynchronous API calls. The function can also dispatch actions—like those synchronous actions we defined earlier.

/*------------------------------
index.js
------------------------------*/
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
...
const store = createStore(rootReducer, applyMiddleware(loggingMiddleware, thunk));

/*------------------------------
actionCreator.js
------------------------------*/
import * as actionTypes from './actionTypes';

export const counterIncrement = () => {
	return {
		type: actionTypes.COUNTER_INCREMENT
	};
}
export const counterIncrementAsync = () => {
	return (dispatch, getState) => {
		setTimeout(() => {
			// Yay! Can invoke sync actions with `dispatch`
			dispatch(counterIncrement());
		}, 2000);
	}
}

/*------------------------------
Counter.js
------------------------------*/
import * as actionCreators from './actionCreators';
...
const mapDispatchToProps = (dispatch) => {
	return {
		counterIncrementDispatcher: () => {
			dispatch(actionCreators.counterIncrementAsync());
		}
	};
}