Управление состоянием и то, как с этим можно справиться в фреймворках Javascript

Я уверен, что вы слышали об управлении состоянием, когда дело касается разработки корпоративных приложений. Давайте начнем с концепции, понимая, что она означает для нас и как помогает нам создавать реактивное приложение. В этом блоге основное внимание будет уделено тому, как поддерживать состояние в приложениях Angular, но концепции одинаковы для всех компонентных фреймворков, включая React и Vue Js.

Что такое госуправление?

State в приложении - это единственный источник правды, содержащий пользовательский контекст или другую глобальную информацию. Давайте рассмотрим сценарий, в котором вы хотите создать приложение, которое будет использовать функцию входа в систему. Допустим, у вас есть несколько компонентов, использующих информацию для входа в систему для отображения информации о входе в систему, например, имя пользователя, адрес электронной почты и ваш аватар. Когда вы обновляете любую из этих данных, вы хотите, чтобы все компоненты захватили и отразили это изменение. С помощью управления состоянием вы можете справиться с этим изменением и убедиться, что данные доступны из одного места для потребления, на которое компоненты могут полагаться и использовать их в структурированном виде с возможностью повторного использования.

Библиотеки управления состоянием для Javascript

Существует множество библиотек для управления состоянием для фреймворков Javascript. Большинство этих библиотек используют шаблон Redux для управления состоянием. Наиболее часто используемые фреймворки используют шаблон RxJs в своей реализации, поскольку RxJs сильно продвигает реактивное программирование для приложений. NgRx - одна из таких платформ для управления состоянием приложений Angular.

Движущиеся части государственного управления

Магазин

Этот компонент заботится обо всех операциях ввода и вывода, связанных с состоянием приложения. Приведенный ниже фрагмент определяет способ обработки состояния для приложения Todo.

export interface TodoState {
    todos: string[];
    loading?: boolean;
}

Действие

Действия - это то, как трансформируется изменение. Приведенный ниже фрагмент является примером использования действий из ngrx/store, определенных для обработки конкретного случая добавления задачи. Это действие должно быть отправлено в хранилище, когда конечный пользователь пытается выполнить действие.

import { Action } from '@ngrx/store';
export class PostTodo implements Action {
    readonly type = 'POST_TODO';
    payload: string;
    constructor(payload: string) {
        this.payload = payload;
    }
}

Последствия

Эффект - это способ обработки асинхронного кода javascript, такого как вызов HTTP-запросов и т. Д. Следующий фрагмент является примером побочного эффекта для сообщения Http, который будет запущен после отправки действия PostTodo в результате изменения в пользовательском интерфейсе.

@Effect() todoPersist = this.actions$.pipe(
        ofType('POST_TODO'),
        switchMap((payload: string) => {
            return this.http.post(
                'https://demo9257915.mockable.io/todos',
                {
                    payload: payload
                }
            ).pipe(
                map((data: string) => {
                    return new AddTodo(data);
                }),
                catchError(error => {
                    return of(null);
                })
            )
        })
    );

Редуктор

Это функция javascript, которая делает копию состояния, вносит изменения и возвращает новое состояние вместе со старым, поскольку изменения, внесенные в приложение, должны быть неизменными.

export function todoReducer(state = initialState, action: TodoType) {
    switch (action.type) {
        case 'ADDED_TODO': {
            return {
                ...state,
                todos: [
                    ...state.todos,
                    action.payload
                ]
            }
        };
        case 'POST_TODO': {
            return {
                ...state,
                loading: true
            };
        };
    }
}

Селектор

Селектор используется для подписки на определенные изменения вашего состояния и обновления пользовательского интерфейса в зависимости от изменения. Следующий фрагмент кода подписывается на добавленные задачи и соответствующим образом обновляет пользовательский интерфейс после того, как сервер создает задачу.

ngOnInit() {
    //Observable for the key todoList, subscribed value using async pipe in component template
    this.store.select('todoList').subscribe(data => {
      this.array = data.todos;
    });
  }

Резюме

Хотя управление состоянием в вашем приложении дает вам рычаги для обработки чтения и обновления данных вашего приложения, оно также добавляет много сложности, если ваше одностраничное приложение имеет небольшой размер. Для случаев с небольшими приложениями лучше обрабатывать состояние вашего приложения, используя только RxJ. Полную работу по управлению состоянием с помощью NgRx в приложениях angular можно найти здесь.