前言
angular-redux-starter是一个用于Angular应用程序的样板 starter，它集成了Redux，用于管理你的应用程序状态。使用该starter，你可以快速地构建出一个具有Redux集成的Angular应用程序。这篇文章将介绍如何使用该npm包来创建一个Angular应用程序，并详细说明其实现过程。
环境要求
在开始使用angular-redux-starter之前，请确保安装了以下环境：
安装
安装angular-redux-starter很简单，只需要在命令行中输入以下命令就可以了：
npm install angular-redux-starter
示例代码
我们将使用以下示例来说明如何使用angular-redux-starter。
创建一个新的Angular应用程序
首先，我们需要创建一个空的Angular应用程序。在命令行中输入以下命令：
ng new my-app
该命令将创建一个名为my-app的新的Angular应用程序，并安装所需的依赖项。
安装依赖项
打开my-app应用程序的项目文件夹，然后输入以下命令来安装依赖项：
cd my-app npm install --save redux @angular-redux/store
该命令将安装Redux和@angular-redux/store依赖项。这些依赖项都是使用angular-redux-starter的必需组件。
集成Redux
现在，我们需要在my-app应用程序中集成Redux。打开src/app/app.module.ts文件，然后添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------------------
-----------
------------- - ------------ --
-------- -
--------------
------------
-----------------------
--
---------- - ------------ -
--
------ ----- --------- --该代码定义了一个名为AppModule的新的Angular应用程序模块。在该模块中，我们将使用StoreModule.forRoot({})来启用Store。{}表示Store的默认状态。
创建Redux组件
现在，我们需要创建一个新的Redux组件。在src/app文件夹中创建一个名为counter的新文件夹，然后在其中创建一个名为counter-actions.ts的新文件和一个名为counter-reducer.ts的新文件。
在counter-actions.ts文件中，输入以下代码：
-- -------------------- ---- ------- ------ -------- ---- -------- ------ ----- --------- - ------------ ------ ----- --------- - ------------ ------ ----- --------------- ---------- ------ - -------- ---- - ---------- ------------------ -------- ------- - - - ------ ----- --------------- ---------- ------ - -------- ---- - ---------- ------------------ -------- ------- - - - ------ ---- ------------- - --------------- - ----------------
该代码定义了两个Redux Actions。它们分别表示增加和减少的操作，并带有一个数字类型的payload。
在counter-reducer.ts文件中， 输入以下代码：
-- -------------------- ---- -------
------ --------------- ---------- ---------- ---- --------------------
------ --------- ------------ -
------ -------
-
----- ------------- ------------ - -
------ -
--
------ -------- --------------------- ------------ - ------------- ------- --------------- ------------ -
------ ------------- -
---- ----------
------ - ------ ----------- - -------------- --
---- ----------
------ - ------ ----------- - -------------- --
--------
------ ------
-
-该代码定义了一个Redux Reducer，该Reducer包含两个操作INCREMENT和DECREMENT，并且当Reducer接收到这些操作时将更新counter状态。
使用Redux Store
现在，我们需要在src/app文件夹中创建一个新文件夹shared，然后在其中创建一个名为app.state.ts的新文件。
在app.state.ts文件中，输入以下代码：
import {CounterState} from '../counter/counter-reducer';
export interface AppState {
counter: CounterState;
}该代码定义了一个名为AppState的新接口。该接口包含具有CounterReducers的counter属性。
在src/app文件夹中创建一个名为counter的新文件夹，然后在其中创建一个名为counter.component.ts的新文件。
在counter.component.ts文件中，输入以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -------
------ - ----- - ---- -----------------------
------ - -------------- ---------------- --------------- - ---- --------------------
------ - -------- - ---- ----------------------
------------
--------- --------------
--------- -
-----
------ ------ - ----- -------
------- --------------------------------
------- --------------------------------
------
-
--
------ ----- ---------------- -
------- -------------------
------------------- ------ ---------------- -
----------- - ------------------ -- ---------------------
-
----------- -
----------------------- --------------------
-
----------- -
----------------------- --------------------
-
-该代码定义了一个CounterComponent组件，其包含了一个当前counter状态的Observable，并提供了一个方法来更新count状态。
更新应用程序模块
最后，我们需要将CounterComponent组件添加到应用程序模块中。打开src/app/app.module.ts文件，然后使用以下代码更新AppModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------------------
------ - ---------------- - ---- ------------------------------
------ - -------------- - ---- ----------------------------
------ - -------- - ---- ---------------------
-----------
------------- - ------------- ---------------- --
-------- -
--------------
------------
------------------------------- -------- -------------- --
--
---------- - ------------ -
--
------ ----- --------- --该代码在应用程序模块中导入了CounterComponent组件，并将CounterReducer添加到Store中。该StoreModule.forRoot<AppState>()方法负责设置StoreModule，并使用{ counter: counterReducer }指定初始化状态为CounterReducer。
现在，我们已经完成了集成Redux功能。用命令行启动应用程序：
ng serve
你就可以在浏览器中看到一个简单的Counter应用程序。
总结
angular-redux-starter是一个在Angular应用程序中集成Redux的方便npm包。通过本文的阅读，你可以快速地熟悉如何使用该npm包来创建一个在Angular应用程序中集成redux 的应用程序，并对其实现有深入理解。希望你能在使用该npm包方面得到帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9d81e8991b448e7618