Как добавить свойства состояния из компонента - PullRequest
Новая
       11

Как добавить свойства состояния из компонента

0 голосов
/ 22 марта 2019

В настоящее время я работаю над проектом, который включает управление состоянием отдельных компонентов с использованием Angular 7 и NGRX.Однако мне нужно сделать эту реализацию масштабируемой, то есть ее можно использовать несколько раз, все еще работая независимо.

До сих пор мне удавалось запустить свое состояние и разобрались со всеми действиями в моем редукторе, наряду со всеми эффектами..

В настоящее время у меня есть это в моем редукторе: 

export interface State extends fromRoot.State {
    widgets: WidgetState;
}

//interface for the specific chunk of state for this reducer
export interface WidgetState {
    dashboardWidgets: Widget[];
    secondDashboardWidgets: Widget[];
    error: string;
}

//set the initial state for the properties in the chunk of state
const initialState: WidgetState = {
    dashboardWidgets: [],
    secondDashboardWidgets: [],
    error: ''
};

//---- selectors ----//

//createfeatureselector return the specific chunk of State from 'widgets', in this case WidgetState
const getWidgetFeatureState = createFeatureSelector<WidgetState>('widgets');

//so it's callable from the component export default.
//this function gets the createfeatureselector to look in the correct chunk and fetches the desired property from said chunk
export const getDashboardWidgets = createSelector(
    getWidgetFeatureState,
    state => state.dashboardWidgets
);

export const getError = createSelector(
    getWidgetFeatureState,
    state => state.error
);

//---- reducers ----//
//creates a copy of the state and adjusts it with the action.payload before changing the state
export function widgetReducer(state = initialState, action: WidgetActions): WidgetState {
    switch(action.type) {
        case WidgetActionTypes.DashboardWidgetAdded:
        return {
            ...state,
            dashboardWidgets: action.payload
        };
        case WidgetActionTypes.DashboardWidgetsLoadSuccess:
        return {
            ...state,
            dashboardWidgets: action.payload,
            error: ''
        }
        case WidgetActionTypes.DashboardWidgetsLoadFail:
        return {
            ...state,
            dashboardWidgets: [],
            error: action.payload
        }
        default:
        return state;
    }
}

и в моих действиях у меня есть следующее: 

//create an enum for custom actions for easy accessibility
export enum WidgetActionTypes {
    DashboardWidgetAdded = '[Dashboard] Widget Added',
    DashboardWidgetsLoad = '[Dashboard] Load',
    DashboardWidgetsLoadSuccess = '[Dashboard] Load Success]',
    DashboardWidgetsLoadFail = '[Dashboard] Load Fail'
}

//create a class to create a new Action of each type listed in the ActionTypes 
export class DashboardWidgetAdded implements Action {
    readonly type = WidgetActionTypes.DashboardWidgetAdded;

    constructor(public payload: Widget[]) {}
}
export class DashboardWidgetsLoad implements Action {
    readonly type = WidgetActionTypes.DashboardWidgetsLoad;
}
export class DashboardWidgetsLoadSuccess implements Action {
    readonly type = WidgetActionTypes.DashboardWidgetsLoadSuccess;

    constructor(public payload: Widget[]) {}
}
export class DashboardWidgetsLoadFail implements Action {
    readonly type = WidgetActionTypes.DashboardWidgetsLoadFail;

    constructor(public payload: string) {}
}

//use the pipe symbol to pipe all actions together in 1 accessible point
export type WidgetActions = DashboardWidgetAdded 
| DashboardWidgetsLoad | DashboardWidgetsLoadSuccess | DashboardWidgetsLoadFail;

Как вы можете видеть, на данный моментЯ должен был бы объявить новый массив в моем состоянии для каждого различного использования моего компонента приборной панели.

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

this.store.dispatch(new widgetActions.CreateNewStateChunkIfNotExists('secondDashboard'));

Есть ли способ, которым это можетбыть сделано?Любая помощь будет приветствоваться.

1 Ответ

1 голос
/ 23 марта 2019

Я взаимодействую с ngrx/store через библиотеку-оболочку (которую я написал), ng-app-state, поэтому вы не сможете точно использовать этот код, но, возможно, общая идея даст вам вдохновение.

Когда я сделал что-то подобное, у меня есть компонент, которому нужно создать собственный новый фрагмент хранилища и предоставить новый корневой уровень «объект хранилища».Эквивалентом без библиотеки-обёртки может быть функциональный модуль?Это выглядит примерно так: 

interface DashboardState {
  // all the state needed for a single dashboard
  someText: string;
}

class DashboardStore extends AppStore<DashboardState> {
  constructor(ngrxStore: Store<any>) {
    super(ngrxStore, uniqId('dashboard'), makeInitialDashboardState());
  }
}

@Component({
  template: `<input [nasModel]="store('someText')">`,
  provides: [DashboardStore],
})
class Dashboard {
  constructor(public store: DashboardStore) {}
}

Затем, когда компонент панели мониторинга находится на странице, он создает свое собственное пространство в корневом хранилище.

...