用redux构建购物车

很久没更新博客了，最近要用到react，再来跟大家分享一个redux案例吧。

 [
   {"id": 1, "title": "iPad 4 Mini", "price": 500.01, "inventory": 2},
   {"id": 2, "title": "H&M T-Shirt White", "price": 10.99, "inventory": 10},
   {"id": 3, "title": "Charli XCX - Sucker CD", "price": 19.99, "inventory": 5}
 ]

这是购物车里面的数据

 import _products from './products.json' //把json引进来

 const TIMEOUT = 100

 export default {
   getProducts: (cb, timeout) => setTimeout(() => cb(_products), timeout || TIMEOUT), //初始化产品
   buyProducts: (payload, cb, timeout) => setTimeout(() => cb(), timeout || TIMEOUT)
 }
 //1:得到产品明细 (延迟)   2:购买产品

下面是购物车的操作

 import shop from '../api/shop'
 import * as types from '../constants/ActionTypes'

 const receiveProducts = products => ({
   type: types.RECEIVE_PRODUCTS,
   products: products
 })

 export const getAllProducts = () => dispatch => {
   shop.getProducts(products => {
     dispatch(receiveProducts(products))
   })
 }  //得到所有产品  从json里里面

 const addToCartUnsafe = productId => ({
   type: types.ADD_TO_CART,
   productId  //得到dispatch发送的数据
 })

 export const addToCart = productId => (dispatch, getState) => {
   if (getState().products.byId[productId].inventory > 0) {
     dispatch(addToCartUnsafe(productId))
   }
 } //增加产品  只有库存大于0时

 export const checkout = products => (dispatch, getState) => {
   const { cart } = getState()

   dispatch({
     type: types.CHECKOUT_REQUEST
   })
   shop.buyProducts(products, () => {
     dispatch({
       type: types.CHECKOUT_SUCCESS,
       cart
     })  //当有买入或卖出时都会checkout
     // Replace the line above with line below to rollback on failure:
     // dispatch({ type: types.CHECKOUT_FAILURE, cart })
   })
 }

需要知道actiontypes，下面是actiontype时文件

 export const ADD_TO_CART = 'ADD_TO_CART'
 export const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST'
 export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'
 export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'
 export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'

下面展示产品的逻辑

 import { combineReducers } from 'redux'
 import { RECEIVE_PRODUCTS, ADD_TO_CART } from '../constants/ActionTypes'

 const products = (state, action) => {
   switch (action.type) {
     case ADD_TO_CART:
       return {
         ...state,
         inventory: state.inventory - 1
       }
     default:
       return state
   }
 }  //往购物车里面添加一个  库存就会减少1个 注意es6语法

 const byId = (state = {}, action) => {
   switch (action.type) {
     case RECEIVE_PRODUCTS:
       return {
         ...state,
         ...action.products.reduce((obj, product) => {
           obj[product.id] = product
           return obj
         }, {})
       } // 重新初始化购物车
     default:
       const { productId } = action
       if (productId) {
         return {
           ...state,
           [productId]: products(state[productId], action)
         }
       }
       return state
   }
 }

 const visibleIds = (state = [], action) => {
   switch (action.type) {
     case RECEIVE_PRODUCTS:
       return action.products.map(product => product.id)
     default:
       return state
   }
 }

 export default combineReducers({
   byId,
   visibleIds
 })  //合并reducer

 export const getProduct = (state, id) =>
   state.byId[id]

 export const getVisibleProducts = state =>
   state.visibleIds.map(id => getProduct(state, id)) //得到visible的产品

下面再就是购物车的

 import {
   ADD_TO_CART,
   CHECKOUT_REQUEST,
   CHECKOUT_FAILURE
 } from '../constants/ActionTypes'

 const initialState = {
   addedIds: [],
   quantityById: {}
 }

 const addedIds = (state = initialState.addedIds, action) => {
   switch (action.type) {
     case ADD_TO_CART:
       if (state.indexOf(action.productId) !== -1) {
         return state
       }
       return [ ...state, action.productId ]
     default:
       return state
   }
 } //如果已添加的id没有这个  就可以添加

 const quantityById = (state = initialState.quantityById, action) => {
   switch (action.type) {
     case ADD_TO_CART:
       const { productId } = action
       return { ...state,
         [productId]: (state[productId] || 0) + 1
       } // 往购物车添加商品 没有就是0
     default:
       return state
   }
 }

 export const getQuantity = (state, productId) =>
   state.quantityById[productId] || 0

 export const getAddedIds = state => state.addedIds 

 const cart = (state = initialState, action) => {
   switch (action.type) {
     case CHECKOUT_REQUEST:
       return initialState
     case CHECKOUT_FAILURE:
       return action.cart
     default:
       return {
         addedIds: addedIds(state.addedIds, action),
         quantityById: quantityById(state.quantityById, action)
       }
   }
 }   

 export default cart

index.js

 import { combineReducers } from 'redux'
 import cart, * as fromCart from './cart'
 import products, * as fromProducts from './products'

 export default combineReducers({
   cart,
   products
 })

 const getAddedIds = state => fromCart.getAddedIds(state.cart)
 const getQuantity = (state, id) => fromCart.getQuantity(state.cart, id)
 const getProduct = (state, id) => fromProducts.getProduct(state.products, id) //方法调用

 export const getTotal = state =>
   getAddedIds(state)
     .reduce((total, id) =>
       total + getProduct(state, id).price * getQuantity(state, id),
       0
     )
     .toFixed(2)  //计算总价   

 export const getCartProducts = state =>
   getAddedIds(state).map(id => ({
     ...getProduct(state, id),
     quantity: getQuantity(state, id)  //得到购物车产品和数量
   }))

cart.js

 import React, { PropTypes } from 'react'
 import Product from './Product'

 const Cart  = ({ products, total, onCheckoutClicked }) => {
   const hasProducts = products.length > 0
   const nodes = hasProducts ? (
     products.map(product =>
       <Product
         title={product.title}
         price={product.price}
         quantity={product.quantity}
         key={product.id}        //product组建 产品的title 数量 价格
       />
     )
   ) : (
     <em>Please add some products to cart.</em>  //无产品时提示
   )

   return (
     <div>
       <h3>Your Cart</h3>
       <div>{nodes}</div>
       <p>Total: ${total}</p>
       <button onClick={onCheckoutClicked}
         disabled={hasProducts ? '' : 'disabled'}>   //购物车没产品时不能点击
         Checkout
       </button>
     </div>
   )
 }

 Cart.propTypes = {
   products: PropTypes.array,
   total: PropTypes.string,
   onCheckoutClicked: PropTypes.func
 }

 export default Cart
 Contact GitHub API Training Shop Blog About

cartcontainer.js

 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { checkout } from '../actions'
 import { getTotal, getCartProducts } from '../reducers'
 import Cart from '../components/Cart'

 const CartContainer = ({ products, total, checkout }) => (
   <Cart
     products={products}
     total={total}
     onCheckoutClicked={() => checkout(products)} />
 )

 CartContainer.propTypes = {
   products: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number.isRequired,
     title: PropTypes.string.isRequired,
     price: PropTypes.number.isRequired,
     quantity: PropTypes.number.isRequired
   })).isRequired,
   total: PropTypes.string,
   checkout: PropTypes.func.isRequired
 }

 const mapStateToProps = (state) => ({
   products: getCartProducts(state),  //这里得到得到的产品 就是上面的参数
   total: getTotal(state) //总价也一样
 })

 export default connect(
   mapStateToProps,
   { checkout }
 )(CartContainer)

product.js

 import React, { PropTypes } from 'react'

 const Product = ({ price, quantity, title }) => (
   <div>
     {title} - ${price}{quantity ? ` x ${quantity}` : null} //有数量就算出总价
   </div>
 )

 Product.propTypes = {
   price: PropTypes.number,
   quantity: PropTypes.number,
   title: PropTypes.string
 }

 export default Product

productItem.js

 import React, { PropTypes } from 'react'
 import Product from './Product'

 const ProductItem = ({ product, onAddToCartClicked }) => (
   <div style={{ marginBottom: 20 }}>
     <Product
       title={product.title}
       price={product.price} />
     <button
       onClick={onAddToCartClicked}
       disabled={product.inventory > 0 ? '' : 'disabled'}>  // 能否添加购物车
       {product.inventory > 0 ? 'Add to cart' : 'Sold Out'} //有库存  无库存就时soldout
     </button>
   </div>
 )

 ProductItem.propTypes = {
   product: PropTypes.shape({
     title: PropTypes.string.isRequired,
     price: PropTypes.number.isRequired,
     inventory: PropTypes.number.isRequired
   }).isRequired,
   onAddToCartClicked: PropTypes.func.isRequired
 }

 export default ProductItem

productlist.js

 import React, { PropTypes } from 'react'

 const ProductsList = ({ title, children }) => (
   <div>
     <h3>{title}</h3>
     <div>{children}</div>
   </div>
 )

 ProductsList.propTypes = {
   children: PropTypes.node,
   title: PropTypes.string.isRequired
 }

 export default ProductsList

productcontainer.js

 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { addToCart } from '../actions'
 import { getVisibleProducts } from '../reducers/products'
 import ProductItem from '../components/ProductItem'
 import ProductsList from '../components/ProductsList'

 const ProductsContainer = ({ products, addToCart }) => (
   <ProductsList title="Products">
     {products.map(product =>
       <ProductItem
         key={product.id}
         product={product}
         onAddToCartClicked={() => addToCart(product.id)} />  //这就是  children
     )}
   </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) //products的来源
 })

 export default connect(
   mapStateToProps,
   { addToCart }
 )(ProductsContainer)

app.js

 import React from 'react'
 import ProductsContainer from './ProductsContainer'
 import CartContainer from './CartContainer'

 const App = () => (
   <div>
     <h2>Shopping Cart Example</h2>
     <hr/>
     <ProductsContainer />
     <hr/>
     <CartContainer />
   </div>
 )

 export default App

到这里应该差不多看明白了，组件还是很容易看的，主要是action之间的衔接确实。。。

index.html

 import React from 'react'
 import { render } from 'react-dom'
 import { createStore, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import createLogger from 'redux-logger'
 import thunk from 'redux-thunk'
 import reducer from './reducers'
 import { getAllProducts } from './actions'
 import App from './containers/App'

 const middleware = [ thunk ];
 if (process.env.NODE_ENV !== 'production') {
   middleware.push(createLogger());
 }

 const store = createStore(
   reducer,
   applyMiddleware(...middleware)
 )

 store.dispatch(getAllProducts())  //初始化产品

 render(
   <Provider store={store}>
     <App />
   </Provider>,
   document.getElementById('root')
 )

在我看来 redux的精华就是reducers，这点也是很难掌握的，组件到比较容易，今后多多研究reducer和action。