Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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)
return (
<ProductsList title="Products">
{ =>
onAddToCartClicked={() => addToCart(} />
ProductsContainer.propTypes = {
products: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
inventory: PropTypes.number.isRequired
addToCart: PropTypes.func.isRequired
const mapStateToProps = state => ({
products: getVisibleProducts(state.products)
export default connect(
{ addToCart }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment