什么是 Redux-saga？
Redux-saga 是一个用于管理 Redux 应用程序的副作用 (例如异步数据获取和访问浏览器缓存) 的库。通过使用基于 generator 的 api，它可以使异步流程更易于读取、编写和测试。
为什么需要 Redux-saga？
Redux 本身并不支持异步操作，它只是一个纯粹的状态管理库。当我们需要从服务器获取数据或执行其他副作用操作时，我们需要使用 Redux 中间件来处理这些操作（例如 Redux-thunk）。
虽然 Redux-thunk 可以起到一定的作用，但它存在以下问题：
代码逻辑不清晰：Redux-thunk 的代码结构相对复杂，难以阅读和理解，同时很难维护。
不易测试：Redux-thunk 嵌套使用多层回调函数，使得测试困难，并且无法进行自动化测试。
技术栈限制：如果需要将项目迁移到其他技术栈，需要一定的学习成本。
因此，Redux-saga 应运而生，它采用的是 generator 函数，可以使代码更加简洁、易于测试和维护。下面将详细介绍 Redux-saga 的使用方法。
Redux-saga 的工作原理
Redux-saga 的工作原理与 Redux-thunk 不同。当我们调用 Redux-thunk 的 action 时，action 本身就像一个函数（我们可以直接在它的内部执行异步操作），然后使用 dispatch 将其返回，最终会更新 store 中的 state。而 Redux-saga 的操作是通过创建一个 saga 来实现的，它拦截所有需要处理的 action，然后使用对应的 saga 处理它，并派生一系列的行为，最终将这些行为传递给 store。
Redux-saga 的使用
以下是 Redux-saga 的使用流程：
- 安装 Redux-saga
npm install redux-saga --save
- 创建 saga 文件
我们需要在项目中创建一个 saga.js 文件，它会包含我们的所有 sagas。如下所示：
-- -------------------- ---- ------- ------ - ----- ---- ---------- - ---- --------------------- ------ - ---------------- - ---- -------- --------- ----------------- - --- - ----- ---- - ----- ---------------------- --------------- ----- ---------- --------------------- ----- ------- - ----- --- - ----- ---------- -------------------- -------- ------------ - - ------ --------- ---------------- - ----- ------------------------ ----------- -展开代码
代码说明：
- call：用于执行异步操作，它是 Redux-saga 提供的一个 API。
- put：用于向 store 发送 action。
- takeLatest：在用户发起的 action 上启动一个 saga。
- 在 store 中使用 saga
我们需要在 store.js 中使用 redux-saga 中间件，并且运行 watchFetchUser saga。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ ----------- ---- ------------- ------ - -------------- - ---- --------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ ------------------------------- -- ----------------------------------- ------ ------- ------展开代码
这样我们就完成了 Redux-saga 的集成，现在可以向 store 发送“FETCH_USER” action 了，它会自动被 watchFetchUser saga 处理。
示例代码
以下是一个使用 Redux-saga 的完整代码示例。我们的目标是使用 Redux-saga 获取一个用户的详细信息。
- 安装依赖包
npm install react react-dom redux react-redux redux-saga --save
- 创建 actions.js
-- -------------------- ---- ------- ------ ----- ---------- - ------------- ------ ----- ------------------ - --------------------- ------ ----- ----------------- - -------------------- ------ -------- ----------------- - ------ - ----- ----------- ------ - -展开代码
- 创建 api.js
export function fetchUserDetails(userId) { return fetch(`https://jsonplaceholder.typicode.com/users/${userId}`) .then(response => response.json()) .catch(error => error); }
- 创建 reducer.js
-- -------------------- ---- ------- ------ - ------------------- ----------------- - ---- ------------ ----- ------------ - - ----- --- ------ -- -- ------ ------- -------- ----------------- - ------------- ------- - ------------------- - ---- ------------------- ------ - --------- ----- ------------ ------ -- - ---- ------------------ ------ - --------- ----- --- ------ ------- -- ---- ----- - -------- ------ ----- - -展开代码
- 创建 saga.js
-- -------------------- ---- ------- ------ - ----- ---- ---------- - ---- --------------------- ------ - ---------------- - ---- -------- ------ - ------------------- ------------------ ---------- - ---- ------------ --------- ----------------- - --- - ----- ---- - ----- ---------------------- --------------- ----- ---------- ------------------- ----- ------- - ----- --- - ----- ---------- ------------------ -------- ------------ - - ------ --------- ---------------- - ----- ---------------------- ----------- -展开代码
- 创建 App.js
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ------- - ---- -------------- ------ - --------- - ---- ------------ ----- --- ------- --------- - ------------------- - ---------------------------- - -------- - ----- ---- - ---------------- ----- ----- - ----------------- ------ - ----- -------- ------------ ------ - ------------------ - ----- ---------- ----------------- ----------- ------------------ ----------- ------------------ ------ - ------ -- - - ----- --------------- - ----- -- -- ----- ----------- ------ ----------- -- ----- ------------------ - -------- -- -- -------------- -------- -- --------------------------- -- ------ ------- -------- ---------------- ------------------ -------展开代码
- 创建 index.js
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------- - ---- -------------- ------ --- ---- -------- ------ ----- ---- ---------- ---------------- --------- -------------- ---- -- ------------ ------------------------------- --展开代码
现在我们已经完成了使用 Redux-saga 获取用户详情信息的操作，你可以将上述代码直接复制到你的代码中进行尝试。当然，这只是 Redux-saga 的基础使用方法和示例，更多高级用法和细节改进可以在实际项目中进行探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c819d8e46428fe9ee1e454
