Доступ к состоянию редуктора из другого редуктора в NGRX

Question

Как я могу получить доступ (прочитать) состояние редуктора внутри другого редуктора в NGRX? Это очень похоже на этот вопрос. Предлагает ли NGRX какое-либо другое решение для этого?

Answer 1

Я просто наткнулся на этот вопрос, когда думал о том, чтобы сделать что-то подобное. Мне нужна была копия некоторой информации о состоянии из другого редуктора в качестве временного "редактируемого" набора данных, который можно было отменить и вернуть обратно к "записанному" набору данных.

В итоге я расширил свой редуктор пользовательского интерфейса (редуктор, который содержал состояние / изменения для текущего сеанса пользователя), чтобы включить свойство для хранения копии данных из моего редуктора данных (редуктора, который представляет то, что хранится в базе данных). Эти данные передаются через действие "Пуск".

Вот сокращенная копия моего действия пользовательского интерфейса:

import { Action } from "@ngrx/store";
import {
  ICableFeature
} from "../../shared/models";

export enum UIActionTypes {
  ...
  UI_EDIT_CUSTOM_TAGS_START = "[UI] Edit Custom Tags Start",
  UI_EDIT_CUSTOM_TAGS_UPDATE = "[UI] Edit Custom Tags Update",
  UI_EDIT_CUSTOM_TAGS_SAVE = "[UI] Edit Custom Tags Save",
  UI_EDIT_CUSTOM_TAGS_SUCCESSFUL = "[UI] Edit Custom Tags Successful",
  UI_EDIT_CUSTOM_TAGS_FAILED = "[UI] Edit Custom Tags Failed",
  UI_EDIT_CUSTOM_TAGS_CANCELED = "[UI] Edit Custom Tags Canceled"
}

...

export class EditCustomTagsStart implements Action {
  readonly type = UIActionTypes.UI_EDIT_CUSTOM_TAGS_START;

  constructor(public payload: ICableFeature) {}
}

export class EditCustomTagsUpdate implements Action {
  readonly type = UIActionTypes.UI_EDIT_CUSTOM_TAGS_UPDATE;

  constructor(public payload: ICableFeature) {}  // This payload has a copy of the data I needed from the other reducer.  Make sure it is a copy and not the same object!
}

export class EditCustomTagsSave implements Action {
  readonly type = UIActionTypes.UI_EDIT_CUSTOM_TAGS_SAVE;

  constructor() {}
}

export class EditCustomTagsSuccessful implements Action {
  readonly type = UIActionTypes.UI_EDIT_CUSTOM_TAGS_SUCCESSFUL;

  constructor() {}
}

export class EditCustomTagsFailed implements Action {
  readonly type = UIActionTypes.UI_EDIT_CUSTOM_TAGS_FAILED;

  constructor(public payload: string) {}
}

export class EditCustomTagsCanceled implements Action {
  readonly type = UIActionTypes.UI_EDIT_CUSTOM_TAGS_CANCELED;

  constructor() {}
}

export type UIActions =
  ...
  | EditCustomTagsStart
  | EditCustomTagsUpdate
  | EditCustomTagsSuccessful
  | EditCustomTagsFailed
  | EditCustomTagsCanceled;

А вот сокращенная копия моего редуктора пользовательского интерфейса:

import * as fromUI from "../actions/ui.actions";
import {
  IOrchestratorState,
  IOrchestratorStatusState,
  ICableFeature
} from "../../shared/models";
export const uiFeatureKey = "ui";

export interface State {
  showScroll: boolean;
  fillingGaps: boolean;
  fillGapStatus: IOrchestratorStatusState;
  currentFillGapState: IOrchestratorState;
  editingCustomTags: boolean;
  customTagEdits: ICableFeature;
}

export const initialState: State = {
  showScroll: true,
  fillingGaps: false,
  fillGapStatus: null,
  currentFillGapState: null,
  editingCustomTags: false,
  customTagEdits: null
};

export function reducer(state = initialState, action: fromUI.UIActions) {
  switch (action.type) {
    ...
    case fromUI.UIActionTypes.UI_EDIT_CUSTOM_TAGS_START:
      return {
        ...state,
        editingCustomTags: true,
        customTagEdits: action.payload  // This is a copy of the data I needed from the other reducer
      };
    case fromUI.UIActionTypes.UI_EDIT_CUSTOM_TAGS_UPDATE:
      return {
        ...state,
        customTagEdits: action.payload  // This is the updated information from user edits, not saved.  
                                        // I can also create a router guard that checks to makes sure the data in this 
                                        // property and the data in my Data store are the same before the page is deactivated
      };
    case fromUI.UIActionTypes.UI_EDIT_CUSTOM_TAGS_SUCCESSFUL:
    case fromUI.UIActionTypes.UI_EDIT_CUSTOM_TAGS_FAILED:
    case fromUI.UIActionTypes.UI_EDIT_CUSTOM_TAGS_CANCELED:
      return {
        ...state,
        editingCustomTags: false,
        customTagEdits: null
      };

    default:
      return state;
  }
}

Как видите, передавая данные от одного редуктора другому в качестве полезной нагрузки в действиях, я могу поддерживать чистые функции в моих редукторах.

Надеюсь, это поможет!