在 Angular 应用程序中使用 Redux-JavaScript中文网-JavaScript教程资源分享门户

Angular 是一个流行的前端框架，而 Redux 是一种流行的状态管理库。将 Redux 与 Angular 一起使用可以有效地管理应用程序的状态，并提高应用程序的可读性和可维护性。在本文中，我们将介绍如何在 Angular 应用程序中使用 Redux，并提供示例代码和指导意义。

什么是 Redux

Redux 是一个 JavaScript 状态容器，它通过单向数据流管理应用程序的状态。Redux 的核心思想是将应用程序的状态储存在一个不可修改的 store 中，并通过 dispatching actions 更改状态。所有的状态更改都是通过纯函数 reducer 实现的。这种单向数据流的方式可以提高应用程序的可读性和可维护性，并使得开发者能够更好地跟踪和调试应用程序的状态变化。

为什么在 Angular 应用程序中使用 Redux

Angular 应用程序通常需要处理大量的数据和复杂的状态管理。使用 Redux 可以将应用程序的状态完全分离出来，提高代码的可重用性、可读性和可维护性。

另外，Redux 还提供了一些额外的好处：

跨组件状态管理：将应用程序的状态从组件中分离可以防止状态重复，并减少状态管理的复杂性。
更好的调试：Redux 中所有的 action 和 reducer 的调用都可以被记录和跟踪。这使得调试和修复代码变得更容易，特别是在复杂的应用程序中。
更好的可扩展性：使用 Redux 可以使得应用程序更容易扩展和维护，因为所有的状态都被储存在一个统一的地方，而且通过 reducer 将状态的变化转化为一个可预测的数据流。

在 Angular 应用程序中使用 Redux 的基本概念

在 Angular 应用程序中使用 Redux，基本的概念包括：store、action、reducer 和 selector。

store: 一个可储存应用程序状态的对象。
action: 描述应用程序状态变化的数据结构。
reducer: 描述如何响应 action 并更改状态的函数。
selector: 帮助我们从状态树中选择某一部分状态的函数。

以下是如何在 Angular 应用程序中使用 Redux 的步骤：

步骤1：安装 Redux

要在 Angular 应用程序中使用 Redux，我们需要安装 redux 和 @ngrx/store 库。

可以通过以下命令安装这些库：

npm install redux @ngrx/store

步骤2：创建一个 store

在 Angular 应用程序中创建一个 store，可以使用 createStore 函数。createStore 函数接受一个 reducer 和可选的初始状态作为参数，并返回一个 store 对象。

以下是创建一个简单的 store 的示例代码：

import { createStore } from 'redux';

function counterReducer(state = { count: 0 }, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };

        case 'DECREMENT':
            return { count: state.count - 1 };

        default:
            return state;
    }
}

const store = createStore(counterReducer);

以上示例代码中定义了一个简单的 reducer，并使用 createStore 函数创建了一个 store 对象。

步骤3：处理 actions

在 Angular 应用程序中，我们通常使用 actions 描述状态的变化。在 Redux 中，所有的 actions 都是纯 JavaScript 对象，并且必须包含一个 type 属性。

以下是一个增加数量的 action 的示例代码：

{
    type: 'INCREMENT',
    payload: { amount: 1 }
}

在 Angular 应用程序中 dispatch 一个 action 可以使用以下代码：

store.dispatch({ type: 'INCREMENT', payload: { amount: 1 } });

步骤4：更新状态

在 Redux 中，每个 state 都被储存在一个 store 对象中，并且是只读的。状态的更新是通过 dispatching actions 更改的。当 dispatching 一个 action 后，reducers（外部纯函数）被调用来处理新的状态。reducers 接受当前状态和 action 作为参数，并返回一个新的状态作为输出。

以下是一个简单的 reducer 实现的示例代码：

function counterReducer(state = { count: 0 }, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + action.payload.amount };

        case 'DECREMENT':
            return { count: state.count - action.payload.amount };

        default:
            return state;
    }
}

以上代码中的 counterReducer 接受当前状态和 action 并返回一个新的状态，这个新的状态是根据 action 和当前状态得出的。如果 reducer 在处理 action 时无需更新状态，则应返回原始状态。

步骤5：使用 selectors

使用 selector 可以帮助我们从状态树中选择某一部分状态。在 Angular 应用程序中使用 selectors 通常涉及选择某个组件所需的一部分状态。

以下是一个返回 state 中 count 属性的 selector 示例代码：

const selectCount = state => state.count;

步骤6：在 Angular 应用程序中使用 @ngrx/store

@ngrx/store 库为 Angular 应用程序提供了一个更加方便的、基于 RxJS 的 Redux 实现。它提供了一组 action、reducer 和 selectors 的函数和装饰器，以帮助我们快速构建和维护 Redux 应用程序。

以下是如何在 Angular 应用程序中使用 @ngrx/store 的示例代码：

import { createAction, createReducer, createSelector, on } from '@ngrx/store';

export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');

export const initialState = { count: 0 };

const _counterReducer = createReducer(
  initialState,
  on(increment, (state) => ({ count: state.count + 1 })),
  on(decrement, (state) => ({ count: state.count - 1 }))
);

export function counterReducer(state, action) {
  return _counterReducer(state, action);
}

export const selectCount = (state) => state.count;

以上代码中，我们使用 createAction 创建了两个 action（increment 和 decrement），并使用 createReducer 创建了一个 reducer（_counterReducer）。最后，我们定义了一个 selector（selectCount）用于从 state 中选择 count 属性。

步骤7：在 Angular 应用程序中使用 @ngrx/store 的 state 和 actions

在 Angular 应用程序中，我们使用 @ngrx/store 的 select 和 dispatch 函数来选择和 dispatch actions。以下是在组件中使用 @ngrx/store 的示例代码：

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { increment, decrement, selectCount } from './counter.reducer';

@Component({
  selector: 'app-counter',
  template: `
    <div>Current count: {{ count$ | async }}</div>
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
  `,
})
export class CounterComponent {
  count$ = this.store.select(selectCount);

  constructor(private store: Store<{ count: number }>) {}

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }
}

在组件中，我们注入了 Store 服务，并使用 select 和 dispatch 函数来选择和 dispatch actions。

总结

在本文中，我们介绍了如何在 Angular 应用程序中使用 Redux，并提供了示例代码和指导意义。使用 Redux 可以更好地管理和跟踪应用程序的状态，提高应用程序的可读性和可维护性。在 Angular 应用程序中使用 @ngrx/store 库可以更方便地构建和维护 Redux 应用程序。当您想要处理大量的数据和复杂的状态管理时，考虑使用 Redux 和 @ngrx/store 库将是一个不错的选择。

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

在 Angular 应用程序中使用 Redux