> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/react-redux-day-09/simple-application-or-redux.md).

# Simple Application | Redux

{% embed url="<https://github.com/tkssharma/React-Internal-Workshop/tree/master/Day-09%20Redux/ES6%20Redux%20%20App%20Books>" %}

![](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-Lk2xAeks1IBblDVmJTE%2F-Lk2xJDD0Yisx2wDkrWd%2FScreen%20Shot%202019-07-18%20at%2012.51.30%20PM.png?alt=media\&token=9944d96d-7e49-4585-9b18-749c4e0f89d2)

```
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import App from './components/app';
import reducers from './reducers';

let store = createStore(reducers, window.devToolsExtension && window.devToolsExtension());
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.querySelector('.container'));

```

Container Components&#x20;

```
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { selectBook } from '../actions/index';
import { bindActionCreators } from 'redux';

class BookList extends Component {
  renderList() {
    return this.props.books.map((book) => {
      return (
        <li
          key={book.title}
          onClick={() => this.props.selectBook(book)}
          className="list-group-item">
          {book.title}
        </li>
      );
    });
  }

  render() {
    return (
      <ul className="list-group col-sm-4">
        {this.renderList()}
      </ul>
    )
  }
}

function mapStateToProps(state) {
  // Whatever is returned will show up as props
  // inside of BookList
  return {
    books: state.books
  };
}

// Anything returned from this function will end up as props
// on the BookList container
function mapDispatchToProps(dispatch) {
  // Whenever selectBook is called, the result shoudl be passed
  // to all of our reducers
  return bindActionCreators({ selectBook: selectBook }, dispatch);
}

// Promote BookList from a component to a container - it needs to know
// about this new dispatch method, selectBook. Make it available
// as a prop.
export default connect(mapStateToProps, mapDispatchToProps)(BookList);

```

Redux Dev Tools Application State&#x20;

![](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-Lk2xAeks1IBblDVmJTE%2F-Lk2xwu4Rx7CxEevTb37%2FScreen%20Shot%202019-07-18%20at%2012.54.17%20PM.png?alt=media\&token=5f175790-3f48-4d28-abda-d40c839de235)