Styjun

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.

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.

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.