diff --git a/examples/shopping-cart/actions/index.js b/examples/shopping-cart/actions/index.js index 5031fce707..e925d81757 100644 --- a/examples/shopping-cart/actions/index.js +++ b/examples/shopping-cart/actions/index.js @@ -1,14 +1,14 @@ import shop from '../api/shop' import * as types from '../constants/ActionTypes' -function receiveProducts(products) { +const receiveProducts = (products) => { return { type: types.RECEIVE_PRODUCTS, products: products } } -export function getAllProducts() { +export const getAllProducts = () => { return dispatch => { shop.getProducts(products => { dispatch(receiveProducts(products)) @@ -16,14 +16,14 @@ export function getAllProducts() { } } -function addToCartUnsafe(productId) { +const addToCartUnsafe = (productId) => { return { type: types.ADD_TO_CART, productId } } -export function addToCart(productId) { +export const addToCart = (productId) => { return (dispatch, getState) => { if (getState().products.byId[productId].inventory > 0) { dispatch(addToCartUnsafe(productId)) @@ -31,7 +31,7 @@ export function addToCart(productId) { } } -export function checkout(products) { +export const checkout = (products) => { return (dispatch, getState) => { const cart = getState().cart diff --git a/examples/shopping-cart/components/Cart.js b/examples/shopping-cart/components/Cart.js index 1fc47cedfa..516c27c2d8 100644 --- a/examples/shopping-cart/components/Cart.js +++ b/examples/shopping-cart/components/Cart.js @@ -1,37 +1,39 @@ import React, { Component, PropTypes } from 'react' import Product from './Product' -export default class Cart extends Component { - render() { - const { products, total, onCheckoutClicked } = this.props +const Cart = ({ products, total, onCheckoutClicked }) => { + const hasProducts = products.length > 0 + const nodes = !hasProducts ? + Please add some products to cart. : + products.map(product => + + ) - const hasProducts = products.length > 0 - const nodes = !hasProducts ? - Please add some products to cart. : - products.map(product => - - ) - - 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 }) => ( +
+

{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)) +)