Redux 是一个基于 Flux 架构的 JavaScript 应用程序状态管理库。它被广泛用于 React 应用程序，但也可以用于任何 JavaScript 应用程序。 在本文中，我们将学习如何在 Angular2 应用程序中使用 Redux。
Redux 的基本原则
在学习如何使用 Redux 之前，让我们首先了解一下 Redux 的基本原则。
Redux 有 3 个基本原则：
单一数据源: 整个应用的状态被存储在单个对象中，成为 store。 这使得它更容易跟踪和管理应用程序的状态。
状态只读: 状态是只读的，不能从组件中直接修改它。 必须通过派遣操作 (action) 来改变状态。 派遣操作是一个对象，它描述了如何改变状态。
使用纯函数来改变状态: 使用纯函数来描述如何改变状态。一个纯函数返回一个新的状态，而不会改变任何状态。 这使得它更容易测试和理解。
前置条件
在我们开始之前，确保您已经安装了下面的依赖项：
- Angular2 (2.0.0+)
- Redux (3.0.0+)
- redux-thunk (2.0.0+)
安装依赖项
首先安装 Redux 和 redux-thunk：
npm install --save redux redux-thunk
创建 Redux Store
首先，让我们创建 Redux Store。 Store 包含整个应用程序的状态。 让我们创建一个名为 store.ts 的文件。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ - ----------- - ---- ------------- ------ ----- ----- - ------------ ------------ --- ---------------------- --
我们使用 createStore 方法来创建一个新的 Store。 第一个参数是一个根 Reducer，我们稍后将复述并创建它。 第二个参数是一个初始状态对象。 这里我们将它保留为空对象。 第三个参数是一个中间件，我们在这里使用 redux-thunk。
创建 Redux Reducer
Reducers 接收操作 (action) 和当前状态 (state)，并返回一个新的状态。 让我们创建一个名为 reducers.ts 的文件。
import { combineReducers } from 'redux';
export const rootReducer = combineReducers({
// add your reducers here
});combineReducers 函数是用于将多个 Reducer 合并到一个单一的 Reducer 中的。 在这里，我们有一个根 Reducer，我们将在此之后添加其他 Reducer。
添加 Redux Reducer
在添加 Reducer 之前，我们需要定义接口来描述我们应用程序的状态。 让我们创建一个名为 state.ts 的文件。
export interface AppState {
// define your state here
}
export const initialState: AppState = {
// set your initial state here
};接下来，我们创建一个 Todo Reducer，并将其添加到 rootReducer 中。
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - ------ - ---- --------------
------ - --------- ------------ ----------- - ---- -----------------
------ - -------- - ---- ----------
------ -------- ----------------- - --- ------- ------- -
------ ------------- -
---- ---------
------ ---------- ----------------
---- ------------
------ -------------- -- -
-- -------- --- --------------- -
------ ----------------- ----- -
---------- ---------------
---
-
------ -----
---
---- ------------
------ ----------------- -- ------- --- ----------------
--------
------ ------
-
-
------ ----- ----------- - -----------------
----- -----------
---
------ -------- ------------------- --------- -
------ -----------
-在这里，我们创建了一个 Todo Reducer，它处理 ADD_TODO, REMOVE_TODO 和 TOGGLE_TODO 操作。 等等。它返回新的应用程序状态。
创建 Redux Actions
接下来，我们需要创建操作 (action)，这些操作描述如何改变状态。 我们将创建一个新文件，名为 actions.ts，其中包含了 Todo 操作 (action) 的常量字符串和操作生成器 (action creators)。
-- -------------------- ---- ------- ------ - ------ - ---- -------------- ------ - ---- - ---- --------- ------ ----- -------- - ------- --- ------ ------ ----- ----------- - ------- ------ ------ ------ ----- ----------- - ------- ------ ------ ------ ----- ------------- ---------- ------ - -------- ---- - --------- ------------------ -------- ----- -- - ------ ----- ---------------- ---------- ------ - -------- ---- - ------------ ------------------ -------- ------- -- - ------ ----- ---------------- ---------- ------ - -------- ---- - ------------ ------------------ -------- ------- -- - ------ ---- ------- - - ------------- - ---------------- - -----------------
在这里，我们定义了 ADD_TODO， REMOVE_TODO 和 TOGGLE_TODO 常量字符串。 我们还定义了 AddTodoAction， RemoveTodoAction 和 ToggleTodoAction 类型。
在 Angular2 应用中使用 Redux
在 Angular2 应用中使用 Redux 需要使用 provideStore 函数，它将 Store 提供给应用程序。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- --------------
------ - ----- - ---- ----------
------ - ------------ - ---- ----------
------ - ------------ ------------ - ---- -------------
------ - ----------------- - ---- ------------------------
------------
--------- ---------
--------- -
-----
-------- ---------
----------
---------------
-------------------------
-------------------------------
--------------------------------
------------
------
--
----------- --------------------
---------- -
-------------- ----- ----------- -- - ----- ------------ --
-
--
------ ----- ------------ -
------ ----------------
------------------- ------- ---------------- --
---------- -
---------- - ---------------------------------
-
--------------- ---- -
------------------------ ---------------------
-
---------------- ------- -
------------------------ ----------------------
-
---------------- ------- -
------------------------ ----------------------
-
-在这里，我们传递一个 rootReducer 和初始状态对象。 我们创建一个 todos 的变量，它是从 Store 中选择的值。 我们处理 handleAdd、 handleToggle 和 handleRemove 的事件，并使用 store 的 dispatch 方法分别分派操作。
总结
在本文中，我们了解了 Redux 的基本原则，如何使用 Redux 在 Angular2 应用程序中管理应用程序状态。 我们还学习了如何创建 Redux Store，Reducer 和操作，以及如何将 Store 注入到我们的 Angular2 应用程序中。
感谢您阅读本文。 我们希望您现在能够使用 Redux 来管理 Angular2 应用程序中的状态！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6592b1cceb4cecbf2d77231e