我应该在useEffect钩子中还是在action-creator-thunk中运行异步代码?

Question

我正在浏览react和Max的教程，并在Redux部分讨论关于动作创建器的想法。然而，异步代码既可以用useEffect钩子写，也可以用action-creator-thunk写。哪种方法会更好?写一个单独的action-creator-thunk而不是useffects会给性能带来额外的好处吗?

action-creator-thunk cart-actions.js代码

export const fetchCartData = () => {
return async (dispatch) => {
const fetchData = async () => {
const response = await fetch(
'https://react-http-6b4a6.firebaseio.com/cart.json'
);
if (!response.ok) {
throw new Error('Could not fetch cart data!');
}
const data = await response.json();
return data;
};
try {
const cartData = await fetchData();
dispatch(
cartActions.replaceCart({
items: cartData.items || [],
totalQuantity: cartData.totalQuantity,
})
);
} catch (error) {
dispatch(
uiActions.showNotification({
status: 'error',
title: 'Error!',
message: 'Fetching cart data failed!',
})
);
}
};
};

useEffect代码

function App() {
const dispatch = useDispatch();
const showCart = useSelector((state) => state.ui.cartIsVisible);
const cart = useSelector((state) => state.cart);
const notification = useSelector((state) => state.ui.notification);
useEffect(() => {
const sendCartData = async () => {
dispatch(
uiActions.showNotification({
status: 'pending',
title: 'Sending...',
message: 'Sending cart data!',
})
);
const response = await fetch(
'https://react-http-6b4a6.firebaseio.com/cart.json',
{
method: 'PUT',
body: JSON.stringify(cart),
}
);
if (!response.ok) {
throw new Error('Sending cart data failed.');
}
dispatch(
uiActions.showNotification({
status: 'success',
title: 'Success!',
message: 'Sent cart data successfully!',
})
);
};
if (isInitial) {
isInitial = false;
return;
}
sendCartData().catch((error) => {
dispatch(
uiActions.showNotification({
status: 'error',
title: 'Error!',
message: 'Sending cart data failed!',
})
);
});
}, [cart, dispatch]);
return (
<Fragment>
{notification && (
<Notification
status={notification.status}
title={notification.title}
message={notification.message}
/>
)}
<Layout>
{showCart && <Cart />}
<Products />
</Layout>
</Fragment>
);
}

Answer 1

然而，异步代码既可以在useEffect钩子中编写，也可以使用action-creator-thunk。哪一种方法会更好?

这取决于您的需求和体系结构。Redux实现了flux架构。

redux thunk和useEffect方法的主要区别在于，redux thunk可以从任何地方(甚至不是组件)分发，而useEffect则绑定到组件。

redux思维更容易测试，因为它是与组件隔离的。当然，你也可以通过useEffect方法将逻辑提取到一个单独的函数中来实现更好的测试，但随后你提取的函数将成为一个"笨重"的函数。函数。