前言
在开发前端应用时，我们往往需要实现一些复杂的业务逻辑，它们可能会在应用中的多个地方用到，因此我们需要一种可重用的方式来处理这些逻辑。通常，我们会把这些逻辑封装为方法或者函数，但是这种方式很难在多个地方共享并且不容易测试。
在 Angular 中，ngrx 是一种处理状态管理的方式，它提供了一系列工具以方便我们管理应用中的数据流。@rocketpants/ngrx-utils 就是一种基于 ngrx 的工具包，它能够帮助我们更加轻松地处理一些常见的业务逻辑。
在本文中，我们将介绍如何使用 @rocketpants/ngrx-utils，并提供一些实际应用场景的示例。
安装
要使用 @rocketpants/ngrx-utils，我们首先需要安装它。可以使用 npm 或者 yarn 来进行安装：
npm install @rocketpants/ngrx-utils --save
yarn add @rocketpants/ngrx-utils
使用
@rocketpants/ngrx-utils 提供了一系列的工具函数，这些函数都可以用于简化我们的状态管理逻辑。
以下是几个常用的工具函数：
createAction
createAction 函数用于创建一个 ngrx action。它接收一个需要返回的 action 类型字符串，并返回一个带有该类型属性的对象。
import { createAction } from '@rocketpants/ngrx-utils';
export const fetchUsers = createAction('[Users] Fetch');createReducer
createReducer 函数用于创建一个 ngrx reducer。它接收一个初始状态和一个 action 处理函数的集合，并返回一个新的 reducer 函数。
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------
------ - ---------- - ---- ------------
------ --------- --------- -
------ ------
-
------ ----- ----------------- --------- - -
------ ---
--
------ ----- ----------- - -------------------------
-----------------
--------- -- -
--------------------------- ------- ------- -- -
------ - --------- ------ -------------- --
---
--
--createEffect
createEffect 函数用于创建一个 ngrx effect。它接收一个 action 类型字符串和一个 effect 处理函数，并返回一个带有该处理函数的对象。
-- -------------------- ---- -------
------ - ------------ - ---- --------------------------
------ - -------- ------------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------ - ----------- ----------------- - ---- ------------
-------------
------ ----- ----------- -
------------------- ------------ ------------ ------- --------- -------- --
----------- - --------------- --
-------------------
-------------------
------------ -- -----------------------------
----------- -- ------------------- ----- ----
--
--
-示例
现在，我们已经知道了如何使用 @rocketpants/ngrx-utils 的一些常用工具函数。接下来，我们将会提供一些实际应用场景的示例。
实现列表分页
我们经常需要实现列表分页的功能，这个功能可以让我们只在需要时加载必要的数据。
首先，我们需要在状态中定义一个分页相关的属性：
export interface UserState {
users: any[];
currentPage: number;
totalPages: number;
}然后，我们可以创建两个 action：
export const fetchUsers = createAction('[Users] Fetch');
export const fetchUsersSuccess = createAction(
'[Users] Fetch Success',
props<{ users: any[]; currentPage: number; totalPages: number }>()
);接下来，我们需要在 reducer 中处理这两个 action：
-- -------------------- ---- -------
------ ----- ----------------- --------- - -
------ ---
------------ --
----------- --
--
------ ----- ----------- - -------------------------
-----------------
--------- -- -
---------------------------------- ------- ------- -- -
------ -
---------
------ ---------------------
------------ ---------------------------
----------- --------------------------
--
---
--
--最后，我们需要在组件中调用 fetchUsers action 并在 Effects 中处理数据：
-- -------------------- ---- -------
------------
--------- ----------------
--------- -
---- ----------- ---- -- --------- --------- --------
------- ---------------------------- --------------
--
--
------ ----- ----------------- -
------- ------------------
------------------- ------ ----------- --
------------ -
----------------------------------
-
---------- -
----------- - ------------------------- -- ------------------
----------------------------------
-
-
-------------
------ ----- ----------- -
------------------- ------------ ------------ ------- --------- -------- --
----------- - --------------- --
-------------------
-------------------
---------------------------------------- -- -------------------------
------------- ------------- -- ----------------------------------------
-------------- --
-------------------
------ ---------------
------------ ----------------------
----------- ---------------------
--
-
-
--
-实现自动搜索
另一个常见的应用场景是实现自动搜索。当用户在搜索框中输入时，应用程序应该自动地发起一个异步搜索。
我们可以从状态中抽取出一个 searchTerm 属性，并创建一个名为 search 的 action：
-- -------------------- ---- ------- ------ --------- --------- - ------ ------ ----------- ------- - ------ ----- ------ - ------------- -------- -------- ------- ------ ------ ---- --
然后，我们可以在 reducer 中处理这个 action：
export const userReducer = createReducer<UserState>(
initialUserState,
(builder) => {
builder.addCase(search, (state, action) => {
return { ...state, searchTerm: action.payload.query };
});
},
);最后，我们可以在组件中调用 search action 并在 Effects 中处理搜索：
-- -------------------- ---- -------
------------
--------- ------------------
--------- -
------ ----------- ----------------------------------------
---- ----------- ---- -- ------ - --------- --------- --------
--
--
------ ----- ------------------- -
------- ------------------
------------------- ------ ----------- --
--------------- ------- -
---------------------------- ----- ----
-
---------- -
----------- - ------------------------- -- ------------------
------------------------- -- --------------------------------------------- -- -
-- ------------ -
---------------------------------------------------------- -- -
--------------------------------------- ----- ----
---
-
---
-
-总结
在本文中，我们介绍了 @rocketpants/ngrx-utils 这个基于 ngrx 的工具包，并提供了一些使用它的示例。@rocketpants/ngrx-utils 可以帮助我们更加轻松地处理一些常见的业务逻辑，从而提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b981e8991b448df01f