在前端开发中，管理数据非常重要。Redux-ORM 是一个使用类似关系数据库的方式来管理数据的 JavaScript 库，它可以与 Redux 配合使用，帮助我们更方便地管理数据。而 redux-orm-angular 是一个为了 Angular 开发者们方便使用 Redux-ORM 而开发的 npm 包。本文将介绍 redux-orm-angular 的使用方法及示例。
安装
首先，我们需要在项目中安装 redux-orm 和 redux-orm-angular：
npm install redux-orm redux-orm-angular --save
接下来，我们需要在 AppModule 中导入 ReduxModule 和 ReduxOrmModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------------
------ - -------------- - ---- --------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
----------------------
------------------------------- ----
--
------------- ---------------
---------- ---------------
--
------ ----- --------- --其中，ReduxModule 是 Angular Redux 的核心模块，ReduxOrmModule 是 redux-orm-angular 的模块，Angluar 通过它来集成 redux-orm。
定义 model
在 Redux-ORM 中，最重要的部分是我们如何定义数据模型（model）。
例如，我们定义一个 User 模型，包含了一个标题和一个文本，代码如下：
-- -------------------- ---- -------
------ - ------ ---- - ---- ------------
------ ----- ---- ------- ----- -
------ --------- - -------
------ ------ - -
--- -------
----- -------
--
------ --- --------- -
-- ---
-
-其中，Model 和 attr 是 redux-orm 提供的类和装饰器。modelName 是一个自定义的字符串，代表该模型的名称，方便其他地方引用。fields 是一个对象，用于指定该模型的属性及其类型。有了定义好的模型之后，我们可以定义 reducer，如下所示：
import { User } from './models';
const userReducer = {
[User.modelName]: User.reducer,
};
export default userReducer;这里我们需要注意，如果我们要使用 redux-orm-angular，我们需要额外导出我们的 reducers：
import { User } from './models';
const userReducer = {
[User.modelName]: User.reducer,
};
export default userReducer;
export const USER_REDUCER_KEY = 'user'; // 我们需要导出模块的名称，以便让 redux-orm-angular 能够找到它集成到 Angular 中
通过上述代码，我们已经定义好了 User 模型以及 reducer。接下来，我们需要在 app.module.ts 中配置 redux-orm-angular：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------------
------ - -------------- - ---- --------------------
------ ------------ - ---------------- - ---- ----------------- -- -------- ------------- ------- ---
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
----------------------
------------------------
------- ------- -- ---- ----- --- -------------- ----
----------- ----------------- -- - ------- --- --- ------------------------- -------
-------- ------------ -- ---- ------- --- ------------------ ----------- ----
--
--
------------- ---------------
---------- ---------------
--
------ ----- --------- --注意到我们需要将我们的 reducer key 和 reducer key 对应的 reducer 传递给 store。
现在，我们的 Redux-ORM 已经被配置好了！我们可以在我们的 Angular 组件中使用这些模型，并进行增删改查操作。
示例
定义好 model 以及 reducer 并不是我们在 Angular 中使用 Redux-ORM 的全部，我们还需要将我们的 Action 和 Reducer 与 Angular 中的组件进行集成。
假设我们需要进行收藏管理，那么我们可以新建一个 Favorites 组件，它使用 Favorite 模型进行数据管理。
Favorites.component.ts：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- - ---- -----------------------
------ - ---------- - ---- -------
------ - -------- - ---- --------------
------ - --------------- - ---- -----------------
------ - ---------------- - ---- ---------------------
------ - ------ - ---- --------------------
------------
--------- ----------------
--------- -
---- ----------- -------- -- ---------- - -------
-------------------------
---------------------------
------- -----------------------------------------------------
------
-
--
------ ----- ------------------ -
----------- -----------------------
------------------- -------- ------------- ------- ---------------- ---------------- --
---------- -
--------------- - -------------------------------------------- ---------------------------------- -- -
------ -----------------------
---
------------------------------------------------------------
-
------------------ ------- -
---------------------------------------------------------------
-
-其中，我们使用了 NgRedux 服务提供者以及 FavoriteActions。这里需要自己定义这些我们需要的 Action。我们可以通过 dispatch 向 Redux 发送 Action。同时，我们还需要订阅 OBS 从 Redux 获取数据。
FavoriteAction.ts：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- - ---- -----------------------
------ - -------- - ---- -----------
------ - ---------------- ---------------- -------------- - ---- ----------
------ - ---------------- - ---- ------------------
-------------
------ ----- --------------- -
------------------- -------- ------------- --
--------------- -
------ -
----- ---------------
-------- --------------------------------------------------------
--
-
------------------------ --------- -
------ -
----- ----------------
-------- ------------------------------------------------------
--
-
------------------ ------- -
------ -
----- ----------------
-------- --------------------------------------------------------
-------- -- --------------------------------------------------
--
-
-这三个 Action 与我们在 Favorite 组件中调用的 deleteFavorite、createFavorite、loadFavorites 相对应，分别为删除、创建、获取收藏。
有了以上代码，我们就可以在 Angular 中使用 redux-orm 了。非常简单，是吧？
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730c81e8991b448e93b6