如何解决React-Redux每当我尝试从购物车中删除商品时,都会抛出“发货不是函数”
在购物车部分的产品上单击“-”按钮,将通过“ onDecreaseCountClicked”道具调用removeItemFromCart()。 removeItemFromCart(),调用dispatch()和getState(),但返回错误“ getState不是函数”。不太确定这里是什么问题...
动作
import shop from '../api/shop'
import * as types from '../constants/ActionTypes'
const receiveProducts = products => ({
type: types.RECEIVE_PRODUCTS,products
})
export const getAllProducts = () => dispatch => {
shop.getProducts(products => {
dispatch(receiveProducts(products))
})
}
const addToCartUnsafe = productId => ({
type: types.ADD_TO_CART,productId
})
export const addToCart = productId => (dispatch,getState) => {
if (getState().products.byId[productId].inventory > 0) {
dispatch(addToCartUnsafe(productId))
}
}
const removeFromCartUnsafe = productId => ({
type: types.DELETE_SINGLE_ITEM,productId
})
export const removeItemFromCart = productId => (dispatch,getState) => {
if (getState().products.byId[productId].inventory > 0) {
dispatch(removeFromCartUnsafe(productId))
}
}
export const checkout = products => (dispatch,getState) => {
const { cart } = getState()
dispatch({
type: types.CHECKOUT_REQUEST
})
shop.buyProducts(products,() => {
dispatch({
type: types.CHECKOUT_SUCCESS,cart
})
})
}
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
CartContainer.js
import React from 'react'
import PropTypes from 'prop-types'
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)
Cart.js
import React from 'react'
import PropTypes from 'prop-types'
import Product from './Product'
import {removeItemFromCart} from '../actions/index'
const Cart = ({ products,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}
onDecreaseCountClicked={() => removeItemFromCart(product.id)}
/>
<input type='number' value={product.quantity.toString()}/>
</>
)
) : (
<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,onCheckoutClicked: PropTypes.func
}
export default Cart
Product.js
import React from 'react'
import PropTypes from 'prop-types'
const Product = ({ price,quantity,title,onDecreaseCountClicked,key }) => (
<div>
{title} - ${price}{quantity ? ` x ${quantity}` : null}
{onDecreaseCountClicked && <button onClick={onDecreaseCountClicked()}>-</button>}
</div>
)
Product.propTypes = {
price: PropTypes.number,quantity: PropTypes.number,title: PropTypes.string
}
export default Product
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。