0.redux.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { readBook } from '../redux/books/action-creators';

class App extends Component {
  render() {
    const { isFetchingBook, book } = this.props;

    return (
      <div>
        {isFetchingBook && 'Loading book...'}
        {!isFetchingBook && (
          <div>
            <h1>{book.title}</h1>
            <h2>{book.author}</h2>
          </div>
        )}
      </div>
    );
  }

  componentDidMount() {
    this.props.readBook(this.props.bookId);
  }
}

function mapStateToProps(state, props) {
  return {
    isFetchingBook: state.books.fetching,
    book: state.books.resources[props.bookId]
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      readBook
    },
    dispatch
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

1.react-request.jsx

import React, { Component } from 'react';
import { ReadBook } from '../request-components/books';

class App extends Component {
  render() {
    return (
      <ReadBook
        bookId={this.props.bookId}
        render={() => {
          return (
            <div>
              {isFetchingBook && 'Loading book...'}
              {!isFetchingBook && (
                <div>
                  <h1>{book.title}</h1>
                  <h2>{book.author}</h2>
                </div>
              )}
            </div>
          );
        }}
      />
    );
  }
}