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

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

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

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)

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

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

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

[1,2]

//ID:quantity 购物车中商品数量
{1: 1
}

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

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

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