購(gòu)物車(chē)

一、商品列表

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 中調(diào)用API shop.getProducts 獲取數(shù)據(jù)
• 獲取數(shù)據(jù)后回調(diào) 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.商品列表頁(yè)面

ProductsContainer

const App = () => (<div><h2>購(gòu)物車(chē)</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)

二、添加商品到購(gòu)物車(chē)

action

• 先驗(yàn)證商品是否庫(kù)存為0。 如果不為0則發(fā)送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 })

• 商品庫(kù)存減一

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

• 商品的state數(shù)據(jù)結(jié)構(gòu)：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]

• 購(gòu)物車(chē)添加商品

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} }

• 購(gòu)物車(chē) state數(shù)據(jù)結(jié)構(gòu)

cart.addedIds

[1,2]

cart.quantityById

//ID:quantity 購(gòu)物車(chē)中商品數(shù)量 {1: 1 }

三、購(gòu)物車(chē)頁(yè)面

顯示購(gòu)物車(chē)中商品列表。和“check”購(gòu)買(mǎi)按鈕

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

四、購(gòu)買(mǎi)

• 用戶點(diǎn)擊購(gòu)買(mǎi)按鈕：dispatch(action): check
• 先清空購(gòu)物車(chē) 發(fā)送dispath:CHECKOUT_REQUEST
• 異步調(diào)用API 購(gòu)買(mǎi)商品。回調(diào)函數(shù)：如果購(gòu)買(mǎi)成功則dispatch:CHECKOUT_SUCCESS. 如果失敗：types.CHECKOUT_FAILURE 恢復(fù)購(gòu)物車(chē)中數(shù)據(jù)

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)

總結(jié)

以上是生活随笔為你收集整理的React学习笔记_shoping_cart的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。