Me preguntaba si podría envolver la acción de despacho en función (por ejemplo, método de clase). Tengo este componente:

function Product({id}) {
   const {state, dispatch} = React.useContext(CartContext);

   return (
      <button onClick={() => dispatch({type: "remove", payload: id})}>Remove</button>
   )
}

Lo que quiero lograr es reemplazar la llamada de despacho de aspecto feo en una función más clara como esta:

<button onClick={() => Cart.remove(id))}>Remove</button>

¿Es posible? Lo he intentado de esta manera, pero los ganchos no se pueden llamar fuera del componente React.

export default Cart {
   static remove = id => React.useContext(CartContext).dispatch({type: "remove", payload: id});
}
1
daamian3 24 jun. 2020 a las 15:15

2 respuestas

La mejor respuesta

Lo que necesitas es crear un gancho personalizado

const useRemoveCart = () => {
   const {state, dispatch} = React.useContext(CartContext);

   return id => dispatch({type: "remove", payload: id})
}

Y ahora puedes usar este gancho y llamar al regreso.

function Product({id}) {
   const remove = useRemoveCart()

   return (
      <button onClick={() => remove(id)}>Remove</button>
   )
}

Pero no creo que este sea el camino a seguir.

Probablemente, lo máximo que podría hacer es crear un gancho useCart que devolverá state y dispatch. Crear un enlace personalizado solo para una función no es bueno, porque si necesita otra función, tendrá que refactorizar o crear un nuevo enlace, y tendrá un enlace para cada función, lo que será muy malo .

Si yo fuera tú, haría esto

const useCart = () => React.useContext(CartContext)

Ahora no necesita importar useContext y CartContext, solo importe useCart

Y probablemente cree variables en lugar de pasar la cadena de agujeros "remove" que puede causar algunos errores tipográficos.

const REMOVE_CART = 'remove'

Y úsalo como

dispatch({type: REMOVE_CART, payload: id})

Ahora nunca tendrá un error tipográfico en la cadena 'remove' porque si lo hace, le dará un error.

1
Vencovsky 24 jun. 2020 a las 12:27

No debe pasar el despacho a componentes secundarios. Los componentes secundarios generalmente deben pasar los datos nuevamente al padre, y el padre debe ser el único responsable del estado en el caso. Sugeriría una función de ayuda en el producto que haga esto.

0
rhigdon 24 jun. 2020 a las 12:24