async.js

import { createStore, applyMiddleware } from "redux";
import { connect, Provider } from "react-redux";
import React from "react";
import { render } from "react-dom";
import thunk from "redux-thunk";

//constant
const UPDATEPROFILE = "UPDATEPROFILE";

const initalState = {
  id: 1,
  name: "Loading...."
};
const ProfileReducer = (state = initalState, action) => {
  switch (action.type) {
    case UPDATEPROFILE:
      return Object.assign({}, state, {
        name: action.name
      });
    default:
      return state;
  }
};

const appStore = createStore(ProfileReducer, applyMiddleware(thunk));

const ProfileActionCreator = name => {
  return dispatch => {
    setTimeout(
      () =>
        dispatch({
          type: UPDATEPROFILE,
          name
        }),
      5000
    );
  };
};

/* appStore.subscribe(function () {
  console.log(appStore.getState());
});
appStore.dispatch(ProfileActionCreator("Robert")); */

class Profile extends React.Component {
  onUpdate = e => {
    this.props.dispatch(ProfileActionCreator('Robert'));
  };
  render() {
    return (
      <div>
        <h1>Update Profile</h1>
        <p>Async Data </p>
        <p>{this.props.name}</p>
        <button onClick={this.onUpdate}>Get Async Data</button>
      </div>
    );
  }
}
const mapStateToProps = state => ({ name: state.name });

const ProfileContainer = connect(mapStateToProps)(Profile);

const App = () => (
  <Provider store={appStore}>
    <ProfileContainer />
  </Provider>
);
render(<App />, document.getElementById("root"));