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

【问题标题】：How to wrap React Hooks dispatch into function outside component如何将 React Hooks 调度包装到组件外部的函数中
【发布时间】：2020-10-14 16:46:15
【问题描述】：

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

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});
}

【问题讨论】：

为什么不写一个简单的函数在产品内部调用 dispatch

标签： javascript reactjs react-hooks

【解决方案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>
   )
}

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

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

如果我是你，我会这样做

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

现在你不需要导入useContext和CartContext，只需要导入useCart

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

const REMOVE_CART = 'remove'

并像使用它

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

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

【讨论】：

【解决方案2】：

您不应该将调度传递给子组件。子组件通常应将数据传回给父组件，而父组件应独自负责案例中的状态。我建议在 Product 中使用 Helper 函数来执行此操作。

【讨论】：