redux-thunk

action.js

import * as actionTypes from './actionTypes';
import * as WebAPI from './WebAPI';

export const updateNavText = (text) => {
	return {
		type: actionTypes.UPDATE_NAV_TEXT,
		value: text,
	};
};

export const getPosts = () => ({
	type: actionTypes.GET_POSTS,
});

export const getPostsSuccess = (data) => ({
	type: actionTypes.GET_POSTS_SUCCESS,
	data,
});

export const getPostList = () => {
	return function (dispatch) {
		dispatch(getPosts())
		WebAPI.getPosts().then(res => {
			dispatch(getPostsSuccess(res.data))
		})
	}
}

containers\PostsContainer.js

import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import Posts from '../component/post_list';
import * as actions from '../actions'

const PostsContainer = (props) => {
  return <Posts {...props} />
}

const mapStateToProps = state => {
  return {
    isLoadingGetPosts: state.nav.isLoadingGetPosts,
    posts: state.nav.posts,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    getPostList: () => {
      dispatch(actions.getPostList())
    }
  }
}

export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(PostsContainer)
);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import navReducer from './reducer';

const reducers = combineReducers({
  nav: navReducer,
});

const store = createStore(reducers, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App name="hugh" />
  </Provider>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();