javascript - 如何将 React Hooks 调度包装到组件外部的函数中

Question

我想知道是否可以将调度操作包装到函数中（例如类方法）。我有这个组件：

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

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

我想要实现的是将难看的调度调用替换为更清晰的函数，如下所示：

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

可能吗？我已经尝试过这种方式，但是不能在 React 组件之外调用钩子。

export default Cart {
   static remove = id => React.useContext(CartContext).dispatch({type: "remove", payload: id});
}

标签： javascriptreactjsreact-hooks

Answer 1

您需要的是创建一个自定义挂钩

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

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

现在你可以使用这个钩子并调用它的返回。

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

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

但我不觉得这是要走的路。

可能你能做的最大的事情就是创建一个返回and的useCart钩子。只为一个函数创建一个自定义的钩子是不好的，因为如果你需要另一个函数，你将不得不做很多重构或者创建一个新的钩子，并且每个函数都会有一个钩子，这将是非常糟糕的.statedispatch

如果我是你，我会这样做

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

现在您不需要导入useContextand CartContext，只需导入useCart

"remove"并且可能创建变量而不是传递可能导致一些拼写错误的孔字符串。

const REMOVE_CART = 'remove'

并像使用它一样

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

现在，您将永远不会在'remove'字符串中出现拼写错误，因为如果这样做，它会给您一个错误。