在现代前端开发中，使用 React 和 Redux 已经成为一种常见的技术栈。Redux 是一个非常流行的状态管理工具，它提供了一种强大的方式来管理应用程序中的状态。但是，Redux 只负责管理状态，不负责处理数据流和副作用。为了解决这个问题，Redux 社区提供了一个名为 Redux-Saga 的库，它允许你以声明方式处理 Redux 数据流中的副作用和异步操作。
Redux-Saga 是一个非常强大的工具，但也有一些使用上的细节和难点。在这篇文章中，我们将介绍一个名为 redux-saga-models 的 npm 包，它是 Redux-Saga 的一个简化和抽象版本。它旨在提供一个简单和直观的方式来处理 Redux 数据流中的副作用和异步操作。
安装和配置
要使用 redux-saga-models，我们需要先进行安装并进行基本配置。
安装
在终端中，通过 npm 安装 redux-saga-models：
$ npm install redux-saga-models
创建模型
redux-saga-models 提供一个叫做 createModel 的函数，它用于创建模型。模型是一个叫做 DUCK 的模式的一种变体，它将自己的 actions、reducers、selectors 和 sagas 组合到一个模块中，以便于组织和维护代码。
以下是创建一个简单模型的示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
----- ------- - -------------
---------- ----------
------ -
------ --
--
--------- -
--------- ------- - ------- -- -- -- --------- ------ ------- ---
---------- -- ----- -- -- -- ------ ----- - - ---
---------- -- ----- -- -- -- ------ ----- - - ---
--
------ -
----------------- -
----- ------------
----- ---------------------------------
--
--
---上面的代码创建了一个叫做 myModel 的模型，其中包含了一个 state 对象、三个 reducers 和一个 saga。
集成
接下来，我们需要将这个模型集成到 Redux Store 中。可以通过以下方式将其添加到现有 store 中：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ------------- ------ - --- - ---- --------------------- ------ - ------- - ---- ------------ ----- ----------- - ----------------- -- -- -------- -------------------- ---------------- --- --------- ---------- - ----- ---------------------- - ----- -------------- - ----------------------- ----- ----- - ------------------------ --------------------------------- -----------------------------
在上面的例子中，我们将 myModel.reducer 添加到了 root reducer 中，并在 root saga 中添加了 myModel.saga()。
使用
创建模型之后，就可以在应用程序中使用它了。redux-saga-models 提供了一个用于创建 selectors 和 action creators 的语法糖，使得操作模型变得更简单。
Dispatch actions
如果要触发模型中的某个 action，我们可以直接调用它：
myModel.actions.increment(); // 触发 increment action
当你调用一个 action 时，它会产生一个类似于 Redux 的 action，然后通过 Redux store 发送它。
Dispatch async actions
如果要触发一个异步操作，我们需要使用 call 和 put 这两个 Redux-Saga 的 effect 函数。好在 redux-saga-models 为我们隐藏了这些操作，我们只需要调用其中一个 Sagas：
yield call(myModel.sagas.asyncIncrement, payload);
Get state value
如果要获取模型中的 state 数据，我们可以使用 selectors。redux-saga-models 为我们自动生成了一些简单的 selectors，可以通过以下方式访问：
myModel.selectors.value(store.getState()); // 返回模型中的 value
我们也可以创建自己的 custom selectors：
const customSelector = state => state.myModel.value + 1; const result = customSelector(store.getState()); // 返回 `value + 1`
总结
redux-saga-models 是一个非常实用的 npm 包，它有助于简化 Redux-Saga 的使用，并提供了一种更简便的方式来处理数据流和副作用。在你的下一个 React+Redux 项目中，一定要尝试使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a7c