#reactjs #react-redux
#reactjs #react-redux
Вопрос:
Нажатие кнопки ‘-‘ на товаре в разделе корзины вызывает removeItemFromCart() через параметр ‘onDecreaseCountClicked’. 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, 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}
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: amp;#36;{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
Product.js
import React from 'react'
import PropTypes from 'prop-types'
const Product = ({ price, quantity, title, onDecreaseCountClicked, key }) => (
<div>
{title} - amp;#36;{price}{quantity ? ` x ${quantity}` : null}
{onDecreaseCountClicked amp;amp; <button onClick={onDecreaseCountClicked()}>-</button>}
</div>
)
Product.propTypes = {
price: PropTypes.number,
quantity: PropTypes.number,
title: PropTypes.string
}
export default Product
Комментарии:
1. вам нужно использовать mapDispatchToProps, чтобы связать ваши действия с вашими компонентами react. Проверьте документы
2. Спасибо за ответ! Вместо этого я перестал использовать useDispatch!