我正在使用redux,我有我的actionCreator添加到购物车也我的reducer函数,这是下面,但我一直得到错误消息说“actionCreators.js:44未捕获的TypeError:调度不是函数”
我的减速器
import { ADD_TO_CART } from '../action/types';
const init = [];
const addToCartReducer = (state = init, action) => {
switch (action.type) {
case ADD_TO_CART:
return [...state, ...action.payload];
default:
return state;
}
};
export default addToCartReducer;
我的操作创建者
export const addToCart = (item) => (dispatch) => {
const product = { ...item, count: 1, sum: item.count * item.prices[0].amount };
dispatch({
type: ADD_TO_CART,
payload: product,
});
};
使用组件的位置
import React, { Component } from 'react';
class Products extends Component {
constructor(props) {
super(props);
this.state = '';
}
render() {
const {
products, addProductImage, centered, imageContainer, currency, addToCart, **Passed it as props**
} = this.props;
const allProducts = !products ? '' : products.products.map((product) => (
<article className="card" key={product.id}>
<div style={imageContainer}>
<img className="card_image1" src={product.gallery[0]} alt={product.name} />
{product.inStock ? (
<img
src={addProductImage}
alt={product.name}
style={{ cursor: 'pointer' }}
onClick={addToCart(product)} **Here I call it**
/>
)
: null}
{!product.inStock ? (<div style={centered}>Out of stock</div>) : null}
</div>
<div>
<div>{product.name}</div>
<div>{`${currency} ${product.prices[0].amount}`}</div>
</div>
</article>
));
return (
<>{allProducts}</>
);
}
}
export default Products;
但我收到此错误消息
我试过在没有道具的情况下使用它,我的意思是直接调用它到那个组件,但没有进展。
1条答案
按热度按时间gpfsuwkq1#
actionCreator是一个返回操作的函数
现在,要在类组件中调用action creator,您需要使用redux中的connect函数
减速器