Estoy practicando una aplicación de comercio electrónico en reaccionar y redux. Mientras trabajaba en él, encontré un error en el que la consola dice "el envío no es una función". Aunque redux-thunk funciona bien en otros creadores de acción. Pero en la siguiente acción, recibo este error.
Aquí está el código de product.jsx
const Product = ({ item }) => { return ( <Container> <Circle /> <Image src={item.img} /> <Info> <Icon> // ----------Here is the Event handler ------------- <ShoppingCartOutlined onClick={addToCart(item)}/> // ------------------ end ---------------- </Icon> <Icon> <SearchOutlined /> </Icon> <Icon> <FavoriteBorderOutlined /> </Icon> </Info> </Container> ); }; export default Product;Aquí está el código del creador de acciones cart.js
import { ADD_TO_CART } from "../constatns/actionConstants"; export const addToCart = item => dispatch =>{ try { const cartItems = []; let alreadyInCart = false; cartItems.forEach(cartItem => { if(cartItem.id === item.id){ alreadyInCart = true; cartItem.count++ } }) if(!alreadyInCart){ cartItems.push({...item, count: 1}) } dispatch({type: ADD_TO_CART, payload: cartItems}) } catch (error) { console.log(error) } }Y aquí está el reductor de carro.
import {ADD_TO_CART} from "../constatns/actionConstants"; const cart = (state = {cartItems: []}, action) => { if(action.type === ADD_TO_CART) { return {...state, cartItems: action.payload} }else { return state } } export default cart Además, ¿podría explicar también la diferencia entre usar <Icon onClick={() => addToCart(item)} /> and <Icon onClick={addToCart(item)} /> . A veces me confundo. Y también cuándo debo usar ambos casos.
Con muchas ganas, gracias :)
Hagamos un resumen rápido de lo que debería suceder en su aplicación.
envías una acción.
esa acción podría ser un objeto, que va directamente al reductor.
o puede ser una definición de función, que va a redux-thunk.
redux thunk le da la función de envío como argumento y lo llama.
entonces, usando Redux-thunk y usando funciones como acciones (como addToCart ), también necesita enviar esas acciones, entonces,
<ShoppingCartOutlined onClick={()=>dispatch(addToCart(item))}/>El despacho podría definirse de estas dos maneras:
1.utilizando el gancho useDispatch del paquete react-redux.
2. Usando la función mapDispatchToProps.
onClick prop debe ser una definición de función, cada vez que ocurre un evento de clic, react llama a esa función.
onClick={addToCart(item)} ,
addToCart(item) devuelve esta definición de función:
dispatch =>{ try { const cartItems = []; let alreadyInCart = false; cartItems.forEach(cartItem => { if(cartItem.id === item.id){ alreadyInCart = true; cartItem.count++ } }) if(!alreadyInCart){ cartItems.push({...item, count: 1}) } dispatch({type: ADD_TO_CART, payload: cartItems}) } catch (error) { console.log(error) } }Y esta definición será llamada por reaccionar, pero está mal. porque esa definición debe ser recibida por redux-thunk.
onClick={() => addToCart(artículo)}
ahora la definición de función llamada por reaccionar después de hacer clic es () => addToCart(item) . todavía está mal debido a las razones que expliqué anteriormente.