如何从组件添加状态属性

问题描述

我目前正在从事一个涉及使用Angular 7和NGRX对单个组件进行状态管理的项目.但是，我需要使此实现具有可伸缩性，这意味着它可以在独立工作的情况下多次使用.

I'm currently working on a project that involves state management for individual components using Angular 7 and NGRX. However, I need to make this implementation scalable, meaning it can be used multiple times while still working independent.

到目前为止，我已经设法使我的状态运行起来，并整理了减速器中的所有动作以及所有影响.

So far I have managed to get my state running and sorted out all action in my reducer, alongside all effects.

目前我的减速器中有这个

Currently I have this in my reducer:

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;
    }
}

在我的操作中，我有以下内容:

and in my actions I have the following:

//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;

如您所见，目前我必须为仪表板组件的每种不同用法在状态下声明一个新数组.

As you can see, at the moment I'd have to declare a new array in my state for each different use of my dashboard component.

我希望能够从我的组件中声明这个新数组和所有reducer动作，这样我就可以得到类似的东西:

I would like to be able to just declare this new array and all reducer actions from my component, so that I'd have something like:

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

有什么办法可以做到?任何帮助都将受到欢迎.

Is there any way this can be done? Any help would be welcome.

推荐答案

我通过包装库(我写过)与ngrx/store进行交互， ng-app-state ，因此您可能无法完全使用此代码，但也许总的想法会给您启发.

I interact with ngrx/store through a wrapper library (that I wrote), ng-app-state, so you may not be able to use this code exactly, but perhaps the general idea will give you inspiration.

当我做完这样的事情后，我就拥有了需要创建自己的商店新片的组件，并提供了一个新的根级别商店对象".没有包装器库的等效项可能是功能模块?看起来像这样:

When I have done things like this, I have the component that needs its own new slice of the store create and provide a new root level "store object". An equivalent without the wrapper library may be a feature module? It looks something like this:

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) {}
}

然后，只要仪表板组件在页面上，它就会在根存储区中创建自己的空间.

Then, whenever a dashboard component is on the page it creates its own space in the root store.

这篇关于如何从组件添加状态属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！