thunk

thunk.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers, applyMiddleware, compose, getInitialState } from 'redux';
import { connect } from 'react-redux';
import thunk from 'redux-thunk';
import './index.css';


// function getBalance() {
//   return new Promise((resolve, reject) => {
//       setTimeout(() => {
//           resolve(1000);
//       }, 3000);
//   });
// }

// function decrementBalance(value){
//   return (dispatch) => {
//     return getBalance().then(amount => {
//       dispatch({type: 'SET_BALANCE', amount: amount - value})
//     });
//   }
// }

// function incrementBalance(value){
//   return (dispatch) => {
//     return getBalance().then(amount => {
//       dispatch({type: 'SET_BALANCE', amount: amount + value})
//     });
//   }
// }


function post (state = { id: 0, post: '' }, action) {
    switch(action.type) {
      case 'SET_POST':
        return { post: action.post };
        break;
      case 'LOADING_POST':
        return { post: <img src="https://s-media-cache-ak0.pinimg.com/originals/dd/67/4f/dd674f89d713bb2645a3292510219998.gif" />}
        break;
      default: 
        return state;
    };
}

function fetchPosts(id) {
    return fetch('https://jsonplaceholder.typicode.com/posts/' + id);
}

function getPost(id) {
  return (dispatch) => {
    dispatch({type: 'LOADING_POST'});
    return fetchPosts(id).then(response => response.json()).then(post => {
        dispatch({type: 'SET_POST', post: (
          <tr><td>{post.title}</td><td>{post.body}</td></tr>
        )});
    });
  }
}


const reducers = combineReducers({
  post
});

  const store = createStore(
    reducers,
    getInitialState,
    compose(
      applyMiddleware(thunk),
      window.devToolsExtension ? window.devToolsExtension() : f => f
    )
  )

const Posts = React.createClass({
  getInitialState() {
    return {id: 0}
  },
  componentDidMount() {
      console.log(this.props.post)
  },
  nextPost() {
    this.setState({id: this.state.id + 1}, 
      this.props.getPost(this.state.id)
    )
  },
   prevPost() {
    this.setState({id: this.state.id - 1}, 
      this.props.getPost(this.state.id)
    )
    
  },
  render () {
    return (
      <div>
        <table>
          {this.props.post.post}
        </table>
        <button onClick={this.nextPost}>Next Post</button>
        <button onClick={this.prevPost}>Prev Post</button>
      </div>
    );
  }
});
const mapStateToProps = function (state) {
    return {
        post: state.post
    }
};
const mapDispatchToProps = function (dispatch) {
    return {
        getPost: (id) => {
            return dispatch(getPost(id));
        }
    }
}
const PostsReact = connect(mapStateToProps, mapDispatchToProps)(Posts);

ReactDOM.render(
  <PostsReact store={store}/>,
  document.getElementById('root')
);