How to reset the NGRX stage after close the particular page.

Hello, I am new to CODEBOTS and currently i am struck up how to clear the state of NGRX after close the particular component/page. Could you please help me on this.

Thanks

Hi @Naresh_Kumar_M! Firstly, welcome to the forum! :wave: :tada:

I am so sorry that we haven’t responded yet, something went wrong with our notification system. I will get someone onto answering this question asap.

Hi @Naresh_Kumar_M,

To perform any action when closing the page, you would need to add an ngOnDestroy method to your component. This method will define logic that should be run when you leave the component/page. To do this, you first add OnDestroy to the class implementations like this:

// % protected region % [Add any additional interfaces to implement here] on begin
implements OnInit, OnChanges, OnDestroy
// % protected region % [Add any additional interfaces to implement here] end

Once that has been added, you can implement the ngOnDestroy method within the component. The next update of Springbot will add ngOnDestroy methods to the majority of our components which you will be able to edit, but in the meantime implementing your own will help you solve your problem.

To clear the state, you need to create an action which can be run from within ngOnDestroy. The first step for this is to add an additional option to the ActionTypes enum, which can be found in clientside/src/app/models/model.action.ts:

 export enum ActionTypes {
	LOGOUT = 'LOGOUT',
	// % protected region % [Add any additional action types here] on begin
	CLEAR_STATE = 'CLEAR_STATE'
	// % protected region % [Add any additional action types here] end
}

In the same file, you can then add an additional action, which you can use to clear the state:

// % protected region % [Add any additional stuff here] on begin
export class ClearStateAction implements Action {
	readonly type = ActionTypes.CLEAR_STATE
}
// % protected region % [Add any additional stuff here] end

After you’ve added this action, you need to go to the clearState method in clientside/src/app/models/model.reducer.ts. Here you can add additional logic to the method which will clear the state when the action is called. Please note that it is not recommended to clear the router state during navigation around the site, as resetting the router state will cause your site to navigate back to the home page whenever the state is reset:

export function clearState(reducer: (AppState, Action) => AppState): (AppState, Action) => AppState {
	return (state: AppState, action: Action) => {
		// % protected region % [Add any additional logic for clearState before the main body here] off begin
		// % protected region % [Add any additional logic for clearState before the main body here] end

		if (action.type === ActionTypes.LOGOUT) {
			state = {
				router: initialRouterState,
				models: initialModelState
			};
		}

		// Add your additional code in this protected region
		// % protected region % [Add any additional logic for clearState after the main body here] on begin
		if (action.type === ActionTypes.CLEAR_STATE) {
			state = {
				router: state.router,
				models: initialModelState
			};
		}
		// % protected region % [Add any additional logic for clearState after the main body here] end

		return reducer(state, action);
	};
}

Once you have made these changes, you can add the action to an ngOnDestroy method, which will ensure that the model state is cleared whenever you navigate away from that component/page:

ngOnDestroy() {
	this.store.dispatch(new ClearStateAction());
}

That should be everything you need to know to reset your state when closing a page. If you have any other questions regarding this topic or any others please get in touch!

2 Likes