实践：Angular6 中使用 Redux 和 Redux DevTools-JavaScript中文网-JavaScript教程资源分享门户

导言

现代的前端应用越来越复杂，各种状态管理比较困难，针对这种情况，Redux 应运而生。Redux 是一个可预测的状态容器，它能使应用程序的状态变得可预测和可维护。Redux 配合 React 开发其已经被广泛应用，并且利用便捷的插件 Redux DevTools，Redux 已经可以轻松开发调试。但是，对于 Angular 开发者，Redux 是不是也可以被应用到 Angular6 的开发中呢？本文将介绍如何将 Redux 和 Redux DevTools 集成到 Angular6 应用程序中。

什么是 Redux

Redux 是 JavaScript 应用程序的可预测状态容器。容器中存储了应用程序的所有状态，并通过简单的规则进行更新。Redux 的核心概念是：

状态是单向数据流的。
应用程序的状态只能通过分发操作进行修改。
状态是不可变的。

这三个概念简化了状态管理的处理，同时带来了高度的可维护性、可预测性和可重用性。使用 Redux 的潜在好处有：

易于管理大型应用程序的状态。
易于测试。
由于状态集中在一个地方，可以在应用程序中更轻松地实现持久化。

Redux 的基本元素包括 store、reducer 和 action。store 存储了应用程序的状态，reducer 定义了如何修改状态，action 触发 reducer 来修改状态。可将他们描述成如下图：

如何使用 Redux

现在，我们将学习如何在 Angular6 中使用 Redux 插件。首先，我们需要使用 npm 安装两个主要的依赖项：

npm install --save @ngrx/store
npm install --save @ngrx/store-devtools

接下来，我们将 config datastore。创建一个 store 文件夹，然后在这个文件夹里面创建四个文件：app.actions.ts、app.reducers.ts、app.states.ts 和 index.ts。

在 actions.ts 文件中，可以创建各种 action：

import { Action } from '@ngrx/store';
export enum AppActionTypes {
    SetData = '[App] Set Data',
    GetData = '[App] Get Data'
}
export class SetData implements Action {
    readonly type = AppActionTypes.SetData;
    constructor(public payload: any) {}
}
export class GetData implements Action {
    readonly type = AppActionTypes.GetData;
}
export type AppActions = SetData | GetData;

在 app.states.ts 文件中，将创建一个接口以定义状态：

export interface AppState {
    data: any;
}

在 app.reducers.ts 文件中，使用接口和相应的 reducer 函数定义状态：

import { Action } from '@ngrx/store';
import { AppState } from './app.states';
import { AppActionTypes, AppActions } from './app.actions';

export const initialState: AppState = {
    data: ''
};

export function reducer(state = initialState, action: AppActions): AppState {
    switch (action.type) {
        case AppActionTypes.SetData:
            return {
                ...state,
                data: action.payload
            };
        case AppActionTypes.GetData:
            return state;
        default:
            return state;
    }
}

在应用程序中使用该确定的 store 怎么样？打开 app.module.ts，导入存储模块并将其添加到您的 import 数组中：StoreModule.forRoot，例如：

import { StoreModule } from '@ngrx/store';
import { reducer } from './store/app.reducers';
@NgModule({
  imports: [
    …
    StoreModule.forRoot({
      app: reducer
    })
    …
  ],
  …
})

添加了存储模块之后，我们就需要配置 Redux DevTools。

在 app.component.ts 文件中添加以下代码：

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { AppState } from './store/app.states';
import { SetData } from './store/app.actions';
declare var window: any;

interface MyWindow extends Window {
  __REDUX_DEVTOOLS_EXTENSION__: any;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  title = 'app';
  data$: Observable<any>;
  constructor(private store: Store<AppState>) {
    const windowRef: MyWindow = window;
    if (windowRef.__REDUX_DEVTOOLS_EXTENSION__) {
      windowRef.__REDUX_DEVTOOLS_EXTENSION__.subscribe((message) => {
        if (message.type === 'DISPATCH' && message.payload.type === 'JUMP_TO_ACTION') {
          this.store.dispatch(new SetData(JSON.parse(message.state)));
        }
      });
    }
    this.data$ = this.store.select(state => state.app.data);
  }
}

这里的代码中，因为我们是在 TypeScript 里开发的，所以首先要声明一个 REDUX_DEVTOOLS_EXTENSION 变量。在构造函数中，我们初始化一个键为‘data’的空状态，同时订阅了 Redux DevTools 状态更新，以便在状态更改时更新我们的主数据。最终，我们从 store 中选择数据并使用 AsyncPipe 获取这些数据。

我们准备好了，开始使用Redux吧！如果您还有疑问，请查看 Girish Patni 的“Angular 6 + ngrx/store + ngrx/store-devtools条形图完全解析”一文。

总结

Redux 是一个完美的状态管理工具，能使前端应用程序状态变得可预测和可维护。随着 Redux 和 Redux DevTools 插件的引入到Angular6中，它的灵活性和可维护性变得更强。使用 Redux，您可以更轻松地管理大型应用程序的状态，并更轻松地测试应用程序。在本文中，我们已经学习了如何使用 Redux 和 Redux DevTools，以便在 Angular6 中构建更好的应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65944866eb4cecbf2d8c41e9

实践：Angular6 中使用 Redux 和 Redux DevTools

导言

什么是 Redux

如何使用 Redux

总结

纠错反馈