- )
-
- return (
-
-
Your Cart
-
{nodes}
-
Total: ${total}
-
-
- )
- }
+ return (
+
+
Your Cart
+
{nodes}
+
Total: ${total}
+
+
+ )
}
Cart.propTypes = {
- products: PropTypes.array,
- total: PropTypes.string,
- onCheckoutClicked: PropTypes.func
+ products: PropTypes.arrayOf(PropTypes.shape({
+ title: PropTypes.string.isRequired,
+ price: PropTypes.number.isRequired,
+ inventory: PropTypes.number.isRequired
+ }).isRequired).isRequired,
+ total: PropTypes.string.isRequired,
+ onCheckoutClicked: PropTypes.func.isRequired
}
+
+export default Cart
diff --git a/examples/shopping-cart/components/Product.js b/examples/shopping-cart/components/Product.js
index dfa257b7e5..904b1b584e 100644
--- a/examples/shopping-cart/components/Product.js
+++ b/examples/shopping-cart/components/Product.js
@@ -1,14 +1,13 @@
import React, { Component, PropTypes } from 'react'
-export default class Product extends Component {
- render() {
- const { price, quantity, title } = this.props
- return {title} - ${price} {quantity ? `x ${quantity}` : null}
- }
-}
+const Product = ({ price, quantity, title }) => (
+ {title} - ${price} {quantity ? `x ${quantity}` : null}
+)
Product.propTypes = {
- price: PropTypes.number,
- quantity: PropTypes.number,
- title: PropTypes.string
+ price: PropTypes.number.isRequired,
+ quantity: PropTypes.number.isRequired,
+ title: PropTypes.string.isRequired
}
+
+export default Product
diff --git a/examples/shopping-cart/components/ProductItem.js b/examples/shopping-cart/components/ProductItem.js
index c2f58eb235..fdacbd57da 100644
--- a/examples/shopping-cart/components/ProductItem.js
+++ b/examples/shopping-cart/components/ProductItem.js
@@ -1,25 +1,19 @@
import React, { Component, PropTypes } from 'react'
import Product from './Product'
-export default class ProductItem extends Component {
- render() {
- const { product } = this.props
-
- return (
-
-
-
-
- )
- }
-}
+const ProductItem = ({ product, onAddToCartClicked }) => (
+
+
+
+
+)
ProductItem.propTypes = {
product: PropTypes.shape({
@@ -29,3 +23,5 @@ ProductItem.propTypes = {
}).isRequired,
onAddToCartClicked: PropTypes.func.isRequired
}
+
+export default ProductItem
diff --git a/examples/shopping-cart/components/ProductsList.js b/examples/shopping-cart/components/ProductsList.js
index 086e529bb8..db6641ec2f 100644
--- a/examples/shopping-cart/components/ProductsList.js
+++ b/examples/shopping-cart/components/ProductsList.js
@@ -1,17 +1,15 @@
import React, { Component, PropTypes } from 'react'
-export default class ProductsList extends Component {
- render() {
- return (
-
-
{this.props.title}
-
{this.props.children}
-
- )
- }
-}
+const ProductsList = ({ title, children }) => (
+
+)
ProductsList.propTypes = {
children: PropTypes.node,
title: PropTypes.string.isRequired
}
+
+export default ProductsList
diff --git a/examples/shopping-cart/containers/App.js b/examples/shopping-cart/containers/App.js
index f19cba3d14..3910ee9326 100644
--- a/examples/shopping-cart/containers/App.js
+++ b/examples/shopping-cart/containers/App.js
@@ -2,16 +2,14 @@ import React, { Component } from 'react'
import ProductsContainer from './ProductsContainer'
import CartContainer from './CartContainer'
-export default class App extends Component {
- render() {
- return (
-
-
Shopping Cart Example
-
-
-
-
-
- )
- }
-}
+const App = () => (
+
+
Shopping Cart Example
+
+
+
+
+
+)
+
+export default App;
diff --git a/examples/shopping-cart/containers/CartContainer.js b/examples/shopping-cart/containers/CartContainer.js
index 45d5d21ccc..4ca9b34fe6 100644
--- a/examples/shopping-cart/containers/CartContainer.js
+++ b/examples/shopping-cart/containers/CartContainer.js
@@ -4,18 +4,12 @@ import { checkout } from '../actions'
import { getTotal, getCartProducts } from '../reducers'
import Cart from '../components/Cart'
-class CartContainer extends Component {
- render() {
- const { products, total } = this.props
-
- return (
- this.props.checkout()} />
- )
- }
-}
+let CartContainer = ({ products, total, checkout }) => (
+
+)
CartContainer.propTypes = {
products: PropTypes.arrayOf(PropTypes.shape({
@@ -35,7 +29,9 @@ const mapStateToProps = (state) => {
}
}
-export default connect(
+CartContainer = connect(
mapStateToProps,
{ checkout }
)(CartContainer)
+
+export default CartContainer
diff --git a/examples/shopping-cart/containers/ProductsContainer.js b/examples/shopping-cart/containers/ProductsContainer.js
index 154982c201..8509ba8c71 100644
--- a/examples/shopping-cart/containers/ProductsContainer.js
+++ b/examples/shopping-cart/containers/ProductsContainer.js
@@ -5,21 +5,16 @@ import { getVisibleProducts } from '../reducers/products'
import ProductItem from '../components/ProductItem'
import ProductsList from '../components/ProductsList'
-class ProductsContainer extends Component {
- render() {
- const { products } = this.props
- return (
-
- {products.map(product =>
- this.props.addToCart(product.id)} />
- )}
-
- )
- }
-}
+let ProductsContainer = ({ products, addToCart }) => (
+
+ {products.map(product =>
+ addToCart(product.id)} />
+ )}
+
+)
ProductsContainer.propTypes = {
products: PropTypes.arrayOf(PropTypes.shape({
@@ -31,13 +26,15 @@ ProductsContainer.propTypes = {
addToCart: PropTypes.func.isRequired
}
-function mapStateToProps(state) {
+const mapStateToProps = (state) => {
return {
products: getVisibleProducts(state.products)
}
}
-export default connect(
+ProductsContainer = connect(
mapStateToProps,
{ addToCart }
)(ProductsContainer)
+
+export default ProductsContainer
diff --git a/examples/shopping-cart/index.js b/examples/shopping-cart/index.js
index 1b475e4714..a5ed64c548 100644
--- a/examples/shopping-cart/index.js
+++ b/examples/shopping-cart/index.js
@@ -1,4 +1,3 @@
-import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
diff --git a/examples/shopping-cart/reducers/cart.js b/examples/shopping-cart/reducers/cart.js
index 39725821ef..fc81df275e 100644
--- a/examples/shopping-cart/reducers/cart.js
+++ b/examples/shopping-cart/reducers/cart.js
@@ -9,7 +9,7 @@ const initialState = {
quantityById: {}
}
-function addedIds(state = initialState.addedIds, action) {
+const addedIds = (state = initialState.addedIds, action) => {
switch (action.type) {
case ADD_TO_CART:
if (state.indexOf(action.productId) !== -1) {
@@ -21,7 +21,7 @@ function addedIds(state = initialState.addedIds, action) {
}
}
-function quantityById(state = initialState.quantityById, action) {
+const quantityById = (state = initialState.quantityById, action) => {
switch (action.type) {
case ADD_TO_CART:
const { productId } = action
@@ -33,7 +33,7 @@ function quantityById(state = initialState.quantityById, action) {
}
}
-export default function cart(state = initialState, action) {
+const cart = (state = initialState, action) => {
switch (action.type) {
case CHECKOUT_REQUEST:
return initialState
@@ -47,10 +47,12 @@ export default function cart(state = initialState, action) {
}
}
-export function getQuantity(state, productId) {
- return state.quantityById[productId] || 0
-}
+export default cart
-export function getAddedIds(state) {
- return state.addedIds
-}
+export const getQuantity = (state, productId) => (
+ state.quantityById[productId] || 0
+)
+
+export const getAddedIds = (state) => (
+ state.addedIds
+)
diff --git a/examples/shopping-cart/reducers/index.js b/examples/shopping-cart/reducers/index.js
index a9ff991d02..e94ccd2cd1 100644
--- a/examples/shopping-cart/reducers/index.js
+++ b/examples/shopping-cart/reducers/index.js
@@ -7,32 +7,32 @@ export default combineReducers({
products
})
-function getAddedIds(state) {
- return fromCart.getAddedIds(state.cart)
-}
+const getAddedIds = (state) => (
+ fromCart.getAddedIds(state.cart)
+)
-function getQuantity(state, id) {
- return fromCart.getQuantity(state.cart, id)
-}
+const getQuantity = (state, id) => (
+ fromCart.getQuantity(state.cart, id)
+)
-function getProduct(state, id) {
- return fromProducts.getProduct(state.products, id)
-}
+const getProduct = (state, id) => (
+ fromProducts.getProduct(state.products, id)
+)
-export function getTotal(state) {
- return getAddedIds(state).reduce((total, id) =>
+export const getTotal = (state) => (
+ getAddedIds(state).reduce((total, id) =>
total + getProduct(state, id).price * getQuantity(state, id),
0
).toFixed(2)
-}
+)
-export function getCartProducts(state) {
- return getAddedIds(state).map(id => Object.assign(
+export const getCartProducts = (state) => (
+ getAddedIds(state).map(id => Object.assign(
{},
getProduct(state, id),
{
quantity: getQuantity(state, id)
}
))
-}
+)
diff --git a/examples/shopping-cart/reducers/products.js b/examples/shopping-cart/reducers/products.js
index eee1a0200b..57f1d6c51d 100644
--- a/examples/shopping-cart/reducers/products.js
+++ b/examples/shopping-cart/reducers/products.js
@@ -1,7 +1,7 @@
import { combineReducers } from 'redux'
import { RECEIVE_PRODUCTS, ADD_TO_CART } from '../constants/ActionTypes'
-function products(state, action) {
+const products = (state, action) => {
switch (action.type) {
case ADD_TO_CART:
return Object.assign({}, state, {
@@ -12,7 +12,7 @@ function products(state, action) {
}
}
-function byId(state = {}, action) {
+const byId = (state = {}, action) => {
switch (action.type) {
case RECEIVE_PRODUCTS:
return Object.assign({},
@@ -33,7 +33,7 @@ function byId(state = {}, action) {
}
}
-function visibleIds(state = [], action) {
+const visibleIds = (state = [], action) => {
switch (action.type) {
case RECEIVE_PRODUCTS:
return action.products.map(product => product.id)
@@ -42,15 +42,17 @@ function visibleIds(state = [], action) {
}
}
-export default combineReducers({
+const shoppingCartApp = combineReducers({
byId,
visibleIds
})
-export function getProduct(state, id) {
- return state.byId[id]
-}
+export default shoppingCartApp
-export function getVisibleProducts(state) {
- return state.visibleIds.map(id => getProduct(state, id))
-}
+export const getProduct = (state, id) => (
+ state.byId[id]
+)
+
+export const getVisibleProducts = (state) => (
+ state.visibleIds.map(id => getProduct(state, id))
+)