Теперь рассмотрим компонент BookDetail.
import React, { Component } from ‘react’;
import { connect } from ‘react-redux’;
class BookDetail extends Component {
render() {
if(!this.props.book) {
return <div>Select a book</div>
}
return (
<div>
<h3>Details for</h3>
<div>{this.props.book.title}</div>
<div>Pages: {this.props.book.pages}</div>
</div>
)
}
}
function mapStateToProps(state) {
return {book: state.activeBook};
}
export default connect(mapStateToProps)(BookDetail);
Если у вас есть предыдущий пост, объясняющий компонент BookList, то этот должен быть прост для понимания. В этом компоненте мы делаем похожие вещи с той разницей, что mapStateToProps возвращает состояние для компонента, которое обозначает активную книгу вместо BookList.
Следовательно, у нас есть активная книга (выбранная книга), доступная в реквизитах для этого компонента, и мы можем использовать {this.props.book.title} и {this.props.book.pages} в нашем методе рендеринга.
