Steps for deleting a feature from a retail outlet

In my main global module, I have an app store.

However, there is a separate lazy-loaded module called the "users" module (accessible through the route /users) that contains a featured store.

  1. When I first access the homepage of the application (app module), the app store is loaded.
  2. Upon navigating to the /users route, the users module is loaded along with the users store.
    • At this point, my store includes both the app store and the users store.
  3. If I navigate away from the users section, I want to remove the users store from the state.

I attempted to reset the user state in the ngOnDestroy method of my principal users component in order to remove it, but the action did not trigger.

ngOnDestroy() {
    this.store.dispatch(fromFeature.resetStoreAction());
}

This is necessary because the modules are accessible based on roles, and having the "users-store" in memory when it's not needed is inefficient.

Answer №1

If you need to eliminate state leafs, consider using the removeReducer function. Keep in mind that you may have to manually re-add the feature if the user navigates back to that page. Check out my article on Removing State Leafs Safely for more insights.

In my opinion, removing this state might not be necessary. If the state is tied to the component's lifecycle, you might find the NgRx Component Store more suitable for your requirements. Learn more at

 constructor(
    private reducers: ReducerManager,
  ) {
  }

ngOnDestroy() {
  this.reducers.removeReducer('feature-name');
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Establishing pathways in Angular 2

I'm currently working on configuring a route so that whenever I visit http://localhost:8080/user/beta/, it will redirect to http://localhost:8080/user/beta/#spreadsheet. The goal is to display the spreadsheet view, but instead of achieving that result ...

Organize array of objects based on the "dataPrin" field

I've been attempting to group this array by the "dataPrin" field for some time now, but without success. It's worth noting that there are two instances of the "dataPrin" field displaying the same date. My goal is to organize this array in a way ...

Steps for styling the header of an Antd Collapse Panel

I'm attempting to modify the text color in the header of an ant panel. Below is the entire ant collapse component code: <Collapse accordion defaultActiveKey={defaultOpenPanel}> <StyledCollapsePanel key="tasksAssignedToMe" header={ ...

By default, Angular 6 now imports RxJS 6 operators seamlessly into its files

My Angular application extensively uses various RxJS 6 operators like filter, take, and takeUntil in almost all files. Importing these operators explicitly in every file is quite cumbersome. I wish there was a way to make them globally accessible. Imagine ...

Is it possible in Angular to first escape HTML strings and then add HTML markup?

Working with a search form in Angular that pulls data from a database and includes an array of strings, I implemented a pipe to highlight the search query in the results by wrapping it with <mark></mark>. This feature has been quite useful so f ...

The factory class is responsible for generating objects without specifying their type

I manage a factory that specializes in facilitating dependency injection. Here's an example of what it looks like: import SomeImportantObject from "./SomeImportantObject" import DataInterface from "./DataInterface" class NoodleFactory { this.depen ...

Can you clarify the distinction between 'String' and 'Text' in Angular 2?

I'm trying to understand the difference between strings and text in my code. Can anyone explain this distinction to me? export class Owner { CompanyName: string; Description: Text; } I'm currently working with Visual Studio 2015 Commun ...

Ways to conceal a table and button in the absence of data for display

I've been working on a way to hide the table and the 'changeState' button when there's no data present. Currently, I have set it up so that a message saying 'No entries in the list!' pops up briefly before disappearing, bringi ...

What could be causing the error that pops up every time I attempt to execute a git push

When I executed the following command in git git push origin <the-name-of-my-branch> I encountered the following warning message Warning: The no-use-before-declare rule is deprecated since TypeScript 2.9. Please utilize the built-in compiler check ...

The Rx subject has not been initialized

Within this particular Namespace, I am exporting a Rx subject of the string data type: namespace something.TaskHandling { export const selectedTask$ = new Rx.Subject<String>(); Inside my TaskListComponent class within the something.TaskHandling. ...

Test Failure: Attempt to access 'componentInstance' property on a non-existent value

I am facing an issue where my unit tests are working fine with the angular2-seed project, but not with my own project that closely resembles angular2-seed. The only difference between my project and angular2-seed is that I use a gulpfile.ts without the to ...

After updating the TypeScriptOutDir configuration, breakpoints are not being reached

Currently, I am utilizing Visual Studio Professional 2013 Update 3 and have developed a Node console Application with the simple "hello world" log instruction. Setting a breakpoint in this instruction and running the debugger functions smoothly, hitting th ...

Automatically updating agGrid CellStyle upon CellValueChanged event

I'm currently utilizing agGrid within an Angular project. My requirement is to change the background color of a cell to yellow when its value is modified, and to red when someone edits the cell and makes the value empty. Below is the implementation: ...

Access User Authentication Profile Information in Firebase Utilizing Angular 2

Need assistance with retrieving user profile information from Angularfire Authentication in Angular? Specifically looking to access the user's Facebook profile picture and name. Your help would be greatly appreciated. Thank you! I have attempted the ...

There seems to be an issue with the response type in the node.js environment

I am currently working on node.js and typescript, but I am encountering a minor issue. Below is the routeController I have created: public allUsers = (req: Request, res: Response) => { res.status(500).json({ status: "ERROR", ...

What is the method to invoke a function within another function in Angular 9?

Illustration ` function1(){ ------- main function execution function2(){ ------child function execution } } ` I must invoke function2 in TypeScript ...

Sending information from a component inside a router-outlet to a higher-level "Parent" component in Angular 2

Is there a way to transfer data from a component embedded within a router-outlet tag in a "parent" component's HTML template back to the parent component? ...

AngularJS organization by

On this page, I have my list of products displayed: Here is the code used to display the products: <img class="col-xs-2" ng-src="{{producto.photo}}" class="img-responsive " alt="{{producto.nombre}}"> <div class="col-xs-1"> <div class= ...

Next.JS-13 detects faulty middleware in App routing

Here is the code snippet from the middleware file: import { NextResponse } from "next/server"; import type { NextRequest } from "next/server"; // This function can be marked as `async` if using `await` inside export function middleware ...

Convention for Naming Files in Typescript

Can anyone provide guidance on file-naming conventions specifically for a Typescript file dedicated to storing types and interfaces? I have come across various Typescript Coding Convention projects on GitHub which cover general file-naming conventions her ...