是否有 reux-saga 替代反应钩子状态管理解决方案

Question

通过使用 React 16 钩子，我可以摆脱 redux，但仍然具有状态管理功能，请参阅：https://kentcdodds.com/blog/application-state-management-with-react

但是，我曾经使用 redux-saga 让侦听器(或处理程序(在化简器处理操作后异步执行一些操作。问题是，如果不依赖 redux，redux-saga，我不确定如何实现这一目标。

换句话说，如果查看此处的示例：https://codesandbox.io/s/4qzj73lozx?fontsize=14&hidenavigation=1&module=%2Fsrc%2F05-context-with-reducer.js

如何监听"增加"操作，在发生时异步执行某些操作(不使用 redux-saga(。

Answer 1

我正在使用redux和redux-saga进行异步操作，这在代码的可读性，调试和模块化方面非常舒适。但是，如果你想使用钩子来处理这个问题，也可以通过创建自定义钩子：

import React, { useState, useEffect } from 'react';
function useAsyncHook() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
async function fetchData() {
try {
setLoading(true);
const res = await fetch(
`ENDPOINT`
);
const data = await res.json();
setData(data);
} catch (error) {
setLoading(false);
}
}
}, []);
return [data, loading];
}

然后你可以像这样使用它：

function App() {
const [data, loading] = useAsyncHook();
return (
<div>
{!loading && <p>Loading...</p>}
{data && data.map(item => {
return <div>{item}</div>;
})
)}
</div>
);
}