如果你有经验开发React应用或已经熟悉Redux概念，那么你很有可能使用或听说过 Redux。Redux是一个非常有用的库，可以全局管理应用程序的状态。然而，在实际开发中，Redux有时过于“笨重”，尤其是在处理异步操作方面。为了解决这个问题，有很多可选方案，其中一个是使用 [redux-trigger] （一个npm包，用于触发redux的saga和reducer）。
在本文中，我们将探讨redux-trigger的详细用法，包括指导您如何在React应用程序中集成redux-trigger并使用示例代码说明。
什么是redux-trigger?
[redux-trigger] 提供了一种类似于事件的机制，触发Redux的Saga和Reducer等关键部分。使用Redux-Trigger，您可以轻松地将Redux与异步操作集成在一起，以实现逻辑上更简单但功能更强大的应用程序。
安装redux-trigger
安装redux-trigger非常简单，您只需要在终端中键入以下命令：
npm install --save redux-trigger
如何使用redux-trigger?
为了使用 redux-trigger，你需要在你的应用中完成以下步骤：
Step 1：配置store，引入redux-trigger middleware
在上述代码中，我们首先创建一个中间件（middleware），并将其与SagaCreator和ReducerCreator一起作为参数传递给createStore()函数来创建store。最后，我们使用Redux-Trigger的createTriggerMiddleware将其拦截器与Redux中间件串联并添加到store中，这样每个action将被中间件依次处理。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ - ------------- - ---- ------------
------ - ----------------------- - ---- ----------------
------ - -------- - ---- -------------
------ - ----- - ---- ----------
------ - --- - ---- --------
----- -------------- - -----------------------
----- ------- - -------------------
----- ----------------- - -------------------------
------------------ -
-------------------- --------------- --- -------------
--
---------------- ---- -
-------------------- --------------- -------- -----
--
---
----- ---------- - ------------------------------- -------------------
------ ----- ----- - -------------------- ------------
--------------------------Step 2：编写Redux trigger
接下来，让我们编写redux-trigger。一个redux-trigger最少需要以下信息：
{
type: 'TRIGGER_TYPE',
status: 'TRIGGER_START' | 'TRIGGER_SUCCESS' | 'TRIGGER_FAILURE',
payload: {},
}其中 "type" 属性是触发器的类型，"status" 属性是描述操作状态的字符串，"payload" 属性包含触发器的参数。
例如，要为我们的应用创建一个异步操作，我们可以使用Redux-Thunk来定义异步操作，这里我们使用Saga：
-- -------------------- ---- -------
------ - ----- ---- ---------- - ---- ---------------------
------ ----- ---- --------
------ --------- -------------- -
--- -
----- -------- - ----- ---------------- ---------- ----------------
----- ---------- ----------------- -------- -----------
----- ---------- ---------------- -------- -----------
- ----- ------- -
----- ---------- ---------------- -------- ----------------
-
-
------ --------- ------------- -
----- -------------------------- --------
-Saga trigger 例子：
我们需要根据上述的Saga来创建一个redux-trigger，这样我们就可以在UI组件中轻松调用它。
import { createAction } from 'redux-actions';
export const signupStart = createAction('SIGNUP_START');
export const signupSuccess = createAction('SIGNUP_SUCCESS');
export const signupFailed = createAction('SIGNUP_FAILED');然后，在UI组件中，我们可以像下面这样调用这个saga trigger：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - -- ------- ---- ------------
----- ------ ------- --------------- -
-------- - -------- -- -
----- - ------ -------- - - -------
------------------------ ------ -------- ---
--
-------- -
-- ---
-
-
----- ------------------ - ---------- -- --
------------------------------ ----------
---
------ ------- ------------- ----------------------------Step 3：触发Redux Trigger
在上面的例子中，我们定义了一个叫做 "signupStart" 的 Trigger，他拥有一个 "SIGNUP_START" 的动作类型。在UI组件中，我们可以像下面这样调用这个saga Trigger：
this.props.signupStart({ email, password });这里的 signupStart与在React组件中绑定的的 "mapDispatchToProps" 函数中的 "signupStart" 相关联。事件调用的触发成功后， 触发器对象的属性 "status" 都会被设为 "TRIGGER_START" 。
Step 4：监听 Redux Trigger 状态
Redux Trigger的状态与Redux Reducer状态非常相似。在将 Trigger 请求发送到服务器之前，我们可以侦听Redux Trigger的状态来获得更新（请求开始、成功或失败）并相应地更改UI组件。
-- -------------------- ---- -------
----- ------ ------- --------- -
-- ---
------------------------------
----- - ------------ - - -----------
----- - ------------- ---------------- - - --------- -- ---
-- ------------- -- ---------------- --- --------------
---------------------
---- ----------------
-- ------
------
---- ------------------
-- -----------
------
---- ------------------
-- ---------
------
--------
-------
-
-
-
-- ---
-
----- --------------- - ------- -- --
------------- -------------------------------------
---
------ ------- ------------------------ ----------------------------在上面的例子中，redux-trigger中名为 "trigger" 的对象包含了本地Reducer所维护的所有Trigger状态。因此，我们只需要在componentDidUpdate()函数中监听 "trigger" 对象即可。
Step 5：使用Redux-ORM
Redux Trigger可以与Redux-ORM一起使用，让您轻松地将所有数据以及相关的业务逻辑集成到一个对象模型中。
-- -------------------- ---- -------
------ - ------ ---- - ---- -----------
------ - ------------ ------------- - ---- -------------------
----- ---- ------- ----- -
------ --- -------- -
------ -
--- -------
----- -------
------ ------
--
-
------ ----------- -
----- - --- ----- ----- - - -----
---------------- ----- --------
-
------ ----- -------------- -
----- --------------------
----- ----------------------
-
-
------------ - ------- ------- -- -
------ ------------- -
---- -----------------
----- ---- - -------------------------
------------------
------
-
--
------ - ---- --在上述代码中， " User " 模型是 Redux-ORM的模型。其中包括 "signup" 函数，它使用创建的 Trigger 来调用异步操作：
async function signup(values) {
await signupStart({ email, password });
await signupSuccess({ values });
}这里，我们使用了React-Redux中的connect高阶函数，将Redux-ORM模型注入了UI组件中：
const mapStateToProps = (state) => ({
users: state.orm.User.all().toRefArray()
});
export default connect(mapStateToProps, mapDispatchToProps)(UserList);结论
Redux Trigger是一个非常有用的npm包，可以轻松地集成Redux和所有异步操作，使其逻辑上更简单但功能更强大。在本文中，我们详细介绍了如何使用 Redux Trigger，在实际开发中，您可以使用Redux Trigger来更好地处理异步操作，以构建更强大的React应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d39