我目前正在从事一个涉及使用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;
正如您所看到的,此刻,我必须为仪表板组件的每种不同用法在状态下声明一个新数组。
我希望能够从我的组件中声明这个新数组和所有reducer动作,这样我就可以得到类似的东西:
this.store.dispatch(new widgetActions.CreateNewStateChunkIfNotExists('secondDashboard'));
有什么办法可以做到?任何帮助都将受到欢迎。
答案 0 :(得分:1)
我通过{我写的)包装库ng-app-state
与ngrx/store
进行了交互,因此您可能无法完全使用此代码,但也许总的想法会给您启发。 / p>
当我做完这样的事情后,我就拥有了需要创建自己的商店新片并提供新的根级别“商店对象”的组件。没有包装器库的等效项可能是功能模块?看起来像这样:
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) {}
}
然后,只要仪表板组件在页面上,它就会在根存储区中创建自己的空间。