connect( state => ({ products: state.products }), dispatch => ({ actions: bindActionCreators(action, dispatch) }) )(Home)
const Products = () => { const items = useSelector((state) => state.products); const dispatch = useDispatch(); const addToCart = (pItem)=> { dispatch({ type: 'cart/ADD', payload:pItem }); } const removeFromCart = (id)=> { dispatch({ type: 'cart/REMOVE', payload:id }); }; return <div className='products-list'> {items.map((item) => <Product addToCart={addToCart} {...item}/>)} </div> }
const ProductDetail = props => { const productId = props.navigation.getParam('productId'); const selectedProduct = useSelector(state => state.products.availableProducts.find(prod => prod.id === productId)); const dispatch = useDispatch(); return ( <ScrollView> <Image style={styles.image} source={{uri: selectedProduct.imageUrl}}/> <View style={styles.actions}> <Button color={Colors.primary} title="Add to cart" onPress={() => { dispatch(cartActions.addToCart(selectedProduct)); }}/> </View> <Text style={styles.price}>${selectedProduct.price}</Text> <Text style={styles.description}>{selectedProduct.description}</Text> </ScrollView> ); }
connect( state => ({ productInfo: state.productInfo, cart: state.products.filter(product => product.number > 0) }), dispatch => ({ actions: bindActionCreators(action, dispatch) }) )(ProductInfo)
const ProductDetailScreen = props => { console.log('Product Detail') const productId = props.navigation.getParam('productId'); const selectedProduct = useSelector(state => state.products.availableProducts.find(prod => prod.id === productId) ); const dispatch = useDispatch(); return ( <ScrollView> <Image style={styles.image} source={{ uri: selectedProduct.imageUrl }} /> <View style={styles.actions}> <Button color={Colors.primary} title="Add to Cart" onPress={() => { dispatch(cartActions.addToCart(selectedProduct)); }} /> </View> <Text style={styles.price}>${selectedProduct.price.toFixed(2)}</Text> <Text style={styles.description}>{selectedProduct.description}</Text> </ScrollView> ); }
connect( state => ({ cart: state.products.filter(product => product.number > 0) }), dispatch => ({ actions: bindActionCreators(action, dispatch) }) )(Cart)
const UserProductScreen = (props) => { const userProducts = useSelector( state => state.products.userProducts ); const dispatch = useDispatch();
const UserProduct = props => { const userProducts = useSelector(state => state.products.userProducts); const dispatch = useDispatch(); const editProductHandler = (id) => {
connect( (state) => { return { products: getVisibleProducts(state.products) }; }, { addToCart } )(ProductsContainer)
const ProductDetailScreen = props => { const productId = props.navigation.getParam('productId'); const selectedProduct = useSelector(state => state.products.availableProducts.find(prod => prod.id === productId) ); const dispatch = useDispatch(); return ( <ScrollView> <Image style={styles.image} source={{ uri: selectedProduct.imageUrl }} /> <View style={styles.actions}> <Button color={Colors.primary} title="Add to Cart" onPress={() => { dispatch(cartActions.addToCart(selectedProduct)); }} /> </View> <Text style={styles.price}>${selectedProduct.price.toFixed(2)}</Text> <Text style={styles.description}>{selectedProduct.description}</Text> </ScrollView> ); }
connect( (state, ownProps) => ({ products: state.products }) )(ProductDetail)
connect( state => ({ products: getVisibleProducts(state.products) }), { addToCart } )(ProductList)