Posted on Jun 8 NGRX is a popular library for state management in Angular applications. It helps to manage the state of an Application in a predictable and scalable way. In this guide, we will go through the step-by-step process of implementing NGRX by building a small Todo application.You can refer to the full code hereTo install NGRX, run the following command in your terminal:The @ngrx/store package provides the core state management functionality for NGRX. The @ngrx/effects package provides a way to handle side-effects in your application.Our application folder structure will look like this -The first step is to Define the model of your data in store/todo.model.ts -In this example, we define the Todo interface with some properties.Service will contain our todo api service with the getAll function. This will act as a fake backend service. We will be going to use the Observable and imitate the latency to show the loader.Define the todo service in store/service.tsActions are messages that describe a state change in your application. They are plain JavaScript objects that have a type property and an optional payload. Define the actions in store/actions.tsIn this example, we define several actions for managing the Todo state. The loadTodos action is used to load the list of todos from the server. The loadTodosSuccess action is dispatched when the todos are loaded successfully. The loadTodosFailure action is dispatched when there is an error loading the todos. The addTodo, updateTodo, and deleteTodo actions are used to add, update, and delete todos respectively.Reducers are pure functions that take the current state and an action and return a new state. They are responsible for handling the state changes in your application. Define the actions in store/reducers.tsIn this example, we define a reducer for managing the Todo state. The todoReducer function takes the initialState and a set of reducer functions defined using the on function from @ngrx/store. Each reducer function handles a specific action and returns a new state.Effects are services that listen for actions and perform side-effects such as HTTP requests or interacting with the browser's APIs.In this example, we define an effect for handling the loadTodos action. The loadTodos$ effect listens for the loadTodos action using the ofType operator from @ngrx/effects. When the action is dispatched, the effect calls the getAll method from the TodoService and dispatches either the loadTodosSuccess or loadTodosFailure action depending on the result.This will be defined in the store/sotre.ts file -AppState interface will define all the feature properties of the application. Here we have a single feature called as todo which is of type TodoState. We can have multiple features inside our application like this.AppStore interface will define all the reducer types used in our app. In this case we have a single todo reducer so we will map the todoReducer to the todo property. appStore will be used to config our Store Module.appEffects will have the array of defined effects classes. This will be used to register the effects in the application.To use the NGRX store in your application, you need to register the StoreModule in your AppModule. We will be using a standalone components here -In this example, we register the store using the appStore. We also register the Effects with appEffects.To use the store in your components, you need to inject the Store service and dispatch actions.We will create a standalone TodoListComponent in src/todo-list.component.ts with the html file in src/todo-list.component.htmlIn this example, we define a component that uses the Store service to load and display todos. We inject the Store service and select the todos property from the state using the select method. We also define three methods for dispatching the loadTodos, addTodo and updateTodo actions. The async pipe is used to subscribe to the todos$ observable and display the list of todos.Add TodoListComponent in the imports array. Add the tag to display the TodoListComponent.In this guide, we have gone through the step-by-step process of implementing NGRX in an Angular application. We have seen how to define the state, actions, reducers, effects, and how to use the store in components. By following these steps, you can easily manage the state of your application in a scalable and predictable way using NGRX.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Ben Halpern - May 22 Suraj Vishwakarma - May 26 Ivan Livshits - May 27 Smitter - May 30 Once suspended, codecraftjs will not be able to comment or publish posts until their suspension is removed. Once unsuspended, codecraftjs will be able to comment and publish posts again. Once unpublished, all posts by codecraftjs will become hidden and only accessible to themselves. If codecraftjs is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Code Craft-Fun with Javascript. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag codecraftjs: codecraftjs consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging codecraftjs will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.