Skip to content

Instantly share code, notes, and snippets.

@01Clarian
Created December 10, 2019 18:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 01Clarian/a8f8f5fb9058dfcb6ad936913136f7a5 to your computer and use it in GitHub Desktop.
Save 01Clarian/a8f8f5fb9058dfcb6ad936913136f7a5 to your computer and use it in GitHub Desktop.
Switching products data from Redux to Context Api
import React,{useContext} from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { addToCart } from '../actions'
import { getVisibleProducts } from '../reducers/products'
import ProductItem from '../components/ProductItem'
import ProductsList from '../components/ProductsList'
import {ProductsContext} from '../provider/products.provider'
const ProductsContainer = ({ addToCart }) => {
const {test, products} = useContext(ProductsContext)
console.log(test)
return (
<ProductsList title="Products">
{products.map(product =>
<ProductItem
key={product.id}
product={product}
onAddToCartClicked={() => addToCart(product.id)} />
)}
</ProductsList>
)
}
ProductsContainer.propTypes = {
products: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
inventory: PropTypes.number.isRequired
})).isRequired,
addToCart: PropTypes.func.isRequired
}
const mapStateToProps = state => ({
products: getVisibleProducts(state.products)
})
export default connect(
mapStateToProps,
{ addToCart }
)(ProductsContainer)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment