在前端开发中,Redux 和 Saga 很常用,在网络请求场景中,使用 redux-saga-fetch-hook 可以更加方便地处理异步网络请求。本文将会详细讲解该 npm 包的使用。
什么是 redux-saga-fetch-hook
redux-saga-fetch-hook 是基于 redux-saga 和 react-hooks 的网络请求库,它可以让我们以更加直观的方式来处理网络请求,同时也简化了使用 redux-saga 和 react-hooks 的流程。
安装和使用
安装 redux-saga-fetch-hook:
npm install redux-saga-fetch-hook --save
在 Redux 应用中配置/rootSaga.js,将 saga 中间件应用到 store 中:
import { applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga'; import rootSaga from './sagas'; const sagaMiddleware = createSagaMiddleware(); const store = createStore(reducers, applyMiddleware(sagaMiddleware)) sagaMiddleware.run(rootSaga);
在需要发送网络请求的组件中,我们可以使用 useFetchHook 来处理请求:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------------ - ---- ------------------------ -------- ------------------ - ----- ------ -------- ------ - -------------- ------ - ------------ ---------------- ------------ --------------- -- ---- --------------- -------- - ------- ----- -- --------- ---- --- ------ - ----- -------- -- ------------------ ----- -- ------------------------------ ------ -- ----------------------- ------ -- -
使用教程
useFetchHook
useFetchHook 是 redux-saga-fetch-hook 中最基本的 hook,用来发送请求和接收响应。
-- -------------------- ---- ------- ----- ------ -------- ------ - -------------- ------ - ------------ ---------------- -- ---- ------------ --------------- -- ---- -- ---- --------------- -- --- --- -- -------- - ------- ----- -- ---- -- --------- ---- -- ---------- ----- ---
返回值:
- data:API 请求成功后返回的数据,如果请求失败或者还没有获得数据,它将返回 null。
- loading:布尔值,表示是否正在请求数据。
- error:如果请求失败,error 将保存从服务器接收到的错误消息。
Fetch缓存
当 useCache 为 true 时,第一次请求响应数据后,redux-saga-fetch-hook 会缓存请求结果。当这个请求被再次触发,且网络状态正确(例如再次触发可能只是滚动到底部或者进入页面,不必请求服务器)时,它会立即调用 resolve,并返回缓存的值。网络错误时不会调用 resolve,也不会使用缓存数据。
请求的状态控制
如果您想要更 granular 地控制其请求的状态,useFetchHook 提供了在开始请求和停止请求时触发回调的功能。这些回调可用于添加按需操作更改组件的状态。这些回调可以作为第三个参数传递给 useFetchHook options
。
-- -------------------- ---- ------- ----- ------ -------- ------ - ------------- - -- ------- -- ----- - ---------- -- -- ------------------ ---------- ---------- -- -- ------------------ ---------- -------- -- -- -------------------- - --
示例代码
以下是一个简单的示例代码,它使用 redux-saga-fetch-hook 从 API 中获取数据并展示:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----------- - ---- -------------- ------ - ------------ - ---- ------------------------ -------- ------------------ - ----- -------- - -------------- ----- ------ -------- ------ - -------------- ------ - ------------ ---------------- ------------ --------------- -- ---- ---------------- -------- - ------- ----- - --- ------------------ -- - --------------- ---------------- -- ---- ------ - ----- -------- -- ------------------ ----- -- --------------- ------ -- - ---- ------------ --------------------- --------------------- ------ --- ------ -- ----------------------- ------ -- -
总结
使用 redux-saga-fetch-hook 可以更好地处理 Redux 和 Saga 的异步网络请求,它提供了 useFetchHook、Fetch 缓存和请求的状态控制等功能。通过本文的学习,你可以更好地利用这个 npm 包。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a49