如何将 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});
}

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

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

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

如果我是你，我会这样做

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

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

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

const REMOVE_CART = 'remove'

并像使用它一样使用

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

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

Answer 2

不应将调度传递给子组件。 子组件通常应将数据传递回父组件，并且父组件应仅对案例中的状态负责。 我建议在产品中使用一个可以执行此操作的帮助程序函数。