Last active
April 20, 2016 10:34
-
-
Save StevenLangbroek/0a7e33ec11b82ca927a7373b21767fdb to your computer and use it in GitHub Desktop.
Rather than decorators, docs recommend this pattern.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { connect } from 'react-redux'; | |
import ProductBody from 'components/ProductBody'; | |
// Export named for testing | |
export const Product = ({ | |
product | |
}) => ( | |
<div className="product"> | |
<h1>{product.get('title')}</h1> | |
<ProductBody product={product} /> | |
</div> | |
); | |
const mapStateToProps = (state, props) => ({ | |
product: state.getIn(['entities', 'products', props.params.productId]) | |
}); | |
// Export "decorated" for implementation | |
export default connect(mapStateToProps)(Product); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { Product } from 'components/Product'; // By importing the named component you don't have to deal with store availability. | |
// etc. etc. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment