購物車

一、商品列表

1.初始化加載商品列表

• 異步加載 需要引入中間件 thunk
• store.dispatch(getAllProducts())

const middleware = [thunk];const store = createStore(reducer,applyMiddleware(...middleware) )store.dispatch(getAllProducts()) render(<Provider store={store}><App/></Provider>,document.getElementById('root') )

• action 中調用API shop.getProducts 獲取數據
• 獲取數據后回調 dispath：receiveProducts

export const getAllProducts = () => dispatch => {shop.getProducts(products => {dispatch(receiveProducts(products))}) }const receiveProducts = products => ({type: types.RECEIVE_PRODUCTS,products })

API

export default {getProducts: (cb, timeout) => {setTimeout(() => cb(_products), timeout || TIMEOUT)},buyProducts: (payload, cb, timeout) => setTimeout(() => cb(), timeout || TIMEOUT) }

2.商品列表頁面

ProductsContainer

const App = () => (<div><h2>購物車</h2><hr/><ProductsContainer/><hr/><CartContainer /></div> ) const ProductsContainer = ({products, addToCart}) => (<ProductsList title="商品列表">{products.map(product =><ProductItemkey={product.id}product={product}onAddToCartClicked={() => addToCart(product.id)}/>)}</ProductsList> )const mapStateToProps = state => {return {products: getVisibleProducts(state.products)} }export default connect(mapStateToProps,{addToCart} )(ProductsContainer)

二、添加商品到購物車

action

• 先驗證商品是否庫存為0。 如果不為0則發送dispatch: addToCartUnsafe

export const addToCart = productId => (dispatch, getState) => {if (getState().products.byId[productId].inventory > 0) {dispatch(addToCartUnsafe(productId))} }const addToCartUnsafe = productId => ({type: types.ADD_TO_CART,productId })

• 商品庫存減一

const products = (state, action) => {switch (action.type) {case ADD_TO_CART:return {...state,inventory: state.inventory - 1}} }

• 商品的state數據結構：products.byId products.visibleIds

products.byId

{1: {"id": 1, "title": "iPad 4 Mini", "price": 500.01, "inventory": 2},2: {"id": 2, "title": "H&M T-Shirt White", "price": 10.99, "inventory": 10} }

products.visibleIds

[1,2]

• 購物車添加商品

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} }const quantityById = (state = initialState.quantityById, action) => {switch (action.type) {case ADD_TO_CART:const { productId } = actionreturn { ...state,[productId]: (state[productId] || 0) + 1}default:return state} }

• 購物車 state數據結構

cart.addedIds

[1,2]

cart.quantityById

//ID:quantity 購物車中商品數量 {1: 1 }

三、購物車頁面

顯示購物車中商品列表。和“check”購買按鈕

const CartContainer = ({ products, total ,checkout}) => (<Cartproducts={products}total={total}onCheckoutClicked={() => checkout(products)} /> )const mapStateToProps = (state) => ({products: getCartProducts(state),total: getTotal(state) })export default connect(mapStateToProps,{ checkout } )(CartContainer) const Cart = ({products, total, onCheckoutClicked}) => {const hasProducts = products.length > 0const nodes = hasProducts ? (products.map(product =><Producttitle={product.title}price={product.price}quantity={product.quantity}key={product.id}/>)) : (<em>Please add some products to cart.</em>)return (<div><h3>Your Cart</h3><div>{nodes}</div><p>Total: &#36;{total}</p><button onClick={onCheckoutClicked}disabled={hasProducts ? '' : 'disabled'}>Checkout</button></div>) }export default Cart

四、購買

• 用戶點擊購買按鈕：dispatch(action): check
• 先清空購物車 發送dispath:CHECKOUT_REQUEST
• 異步調用API 購買商品。回調函數：如果購買成功則dispatch:CHECKOUT_SUCCESS. 如果失敗：types.CHECKOUT_FAILURE 恢復購物車中數據

export const checkout = products => (dispatch, getState) => {const { cart } = getState()dispatch({type: types.CHECKOUT_REQUEST})shop.buyProducts(products, () => {dispatch({type: types.CHECKOUT_SUCCESS,cart})// Replace the line above with line below to rollback on failure:// dispatch({ type: types.CHECKOUT_FAILURE, cart })}) }

shop.buyProducts

buyProducts: (payload, cb, timeout) => setTimeout(() => cb(), timeout || TIMEOUT)

總結

以上是生活随笔為你收集整理的React学习笔记_shoping_cart的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。