什么是 redux-saga-resources？
redux-saga-resources 是一个轻量级的库，它可以非常便捷地处理 React 和 Redux 应用程序中的复杂业务逻辑和异步操作。redux-saga-resources 提供了一种开发模式和一些工具，可以快速、干净地编写 Redux 异步流程和逻辑。
安装
安装 redux-saga-resources 的方法非常简单，只需在终端中运行以下命令：
npm install redux-saga-resources
或者
yarn add redux-saga-resources
使用方法
1. 创建资源
首先，必须创建一个 resource，例如：
import { createResource } from 'redux-saga-resources';
export const usersResource = createResource('users', {
fetch: ({ api }) => api.get('/users'),
create: ({ api, body }) => api.post('/users', body),
delete: ({ api, id }) => api.delete(`/users/${id}`),
});在上面的例子中，资源名是 'users'，fetch、create 和 delete 是这个资源的三个异步操作。fetch、create 和 delete 都是 promises，会根据需要加载和卸载数据。
2. 在 sagas 中使用资源
然后，在应用程序的 saga 中使用这个资源：
-- -------------------- ---- -------
------ - ---------- - ---- ---------------------
------ - ------------- - ---- ------------------
--------- ------------------ -
----- ------------------------------- --------- -------- -
----- - -------- ----- - - ----- ------------------------- - ---- --------- ---
----- ------------------------------
---
-
------ ------- --------- ---------- -
----- -----
-------------------
---
-这个函数会监听 fetch 操作，当 fetch 操作发出时，它会调用 usersResource.fetch，然后将结果存储在 Redux store 中。
3. 在组件中使用资源
最后，在 React 组件中使用资源：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ------------- - ---- ------------------
-------- ----- -
----- -------- - --------------
----- ----- - -----------------------------------------
------------ -- -
--------------------------------
-- ------------
------ -
-----
----------------- -- ---- ---------------------------------
------
--
-
------ ------- ----在这个例子中，通过使用 useSelector 钩子，我们可以访问 usersResource 的所有数据，而在 useEffect 中，我们调用了 usersResource.fetch，以确保数据被加载到 store 中。
示例代码
为了让你更好地理解如何使用 redux-saga-resources，我们提供了一个实际的示例代码。在这个示例中，我们将加载一个简单的 TODO 应用，使用 redux-saga-resources 处理异步逻辑。
1. 安装依赖
在开始编写代码之前，请确保安装了以下的依赖：
npm install react redux react-redux redux-saga redux-saga-resources
2. 设置 Redux store
在 setupStore.js 文件中，我们将创建 Redux store，包括 reducers、sagas 和 middlewares：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ - -------------- - ---- -----------------------
------ - --- - ---- ---------------------
------ - ------- - ---- -------------
------ - -------- - ---- ----------
----- --- - -
------ -
---- -- -- ------------------ --- -- ----- ----- --- ----- -- - --- -- ----- ---- ----- ---
-
--
----- -------------- - -----------------------
------ ----- ------------- - ----------------------- -
------ -- -- ----------------
---
------ ----- ----- - -------------------- ---------------------------------
---------------------------- -- -
----- -----
-----------
---------------------
---
---3. 设置 Redux reducers
在 reducers.js 文件中，我们将创建 Redux reducers：
import { todosResource } from './setupStore';
export const reducer = combineReducers({
todos: todosResource.reducer,
});4. 设置 Redux sagas
在 sagas.js 文件中，我们将创建 Redux sagas：
-- -------------------- ---- ------- ------ - --- - ---- --------------------- ------ - ---------- ---- ---- - ---- --------------------- ------ - ------------- - ---- --------------- ------ --------- ------------ - ----- ----- - ----- -------------------------- ----- ------------------------------ - ------ --------- ---------- - ----- ------------------------------ ------------ - ------ ------- ---------
在这个例子中，我们创建了两个 saga。第一个 saga fetchTodos 负责提取 todo 数据，并将它们存储在 store 中。第二个 saga todoSaga 监听 todosResource 的 fetch 操作，当 fetch 操作被发出时，它会调用 fetchTodos。
5. 编写 React UI 组件
在 App.js 文件中，我们将创建 React UI 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ------------- - ---- ---------------
-------- ----- -
----- -------- - --------------
----- ----- - -----------------------------------------
------------ -- -
--------------------------------
-- ----
------ -
-----
----
----------------- -- --- --------------------------------
-----
------
--
-
------ ------- ----在这个组件中，我们使用 useEffect 钩子确保数据被加载到 store 中以渲染出 UI。
总结
使用 redux-saga-resources，可以快速的编写出一个 Redux 应用中的异步逻辑。它为开发人员提供了一些非常有用的工具，以帮助他们更有效地处理数据和复杂逻辑。我们希望本文对您了解 redux-saga-resources 提供了帮助，并可以在将来的开发过程中，提高生产力和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600f81e8991b448ddeba