Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fatimazbouj/angular-ngrx-simple


https://github.com/fatimazbouj/angular-ngrx-simple

Last synced: about 2 months ago
JSON representation

Awesome Lists containing this project

README 

        
# What is NGRX?

NgRx is a framework for building reactive applications in Angular. NgRx provides libraries for:

Managing global and local state.

Isolation of side effects to promote a cleaner component architecture.

Entity collection management.

Integration with the Angular Router.

Developer tooling that enhances developer experience when building many different types of applications.



## State management and Redux pattern:

- State: Representation of the application

- Redux: Is a pattern enable to make state mutations predictable especially when the app is huge and hard to predict changes or report bugs which is hard to find, it’s basically a state container and it follows tree principles:

- Single source of truth(store): Everything changes in the app including data and UI state is contained in a single object called state or state tree.

- The state is read only(immutable): The only way to change the state tree is to dispatch an action which is a JavaScript function describe in a minimal way the changes in the app.

- All changes in the state are made by pure functions called reducers.

-	When the user interacts with the app, he dispatches an action specifying its type and its payload. 

-	The reducer which is listening to this action will take the state and the action being dispatched as args, and depending on the type of the action the reducer will return a new state including the changes and of course it will replace the old state.



### Install all dependencies we need for NgRx:

`npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools @ngrx/router-store --force`



1-	Initialize the root application state in the app.module.ts file

2-	Combine Reducers: Use StoreModule.forRoot() to combine these reducers into a single reducer that you'll use in your application.

3-	Add the feature in your module imports: 

StoreModule.forFeature('users',userReducer),



### ngrx store:



`ng new NgRx-simple`

`npm install @ngrx/store`

`npm install @ngrx/entity`



### ngrx effects:



`npm i @ngrx/effects`



`pipe` is a powerful function in RxJS used to combine multiple operators into a chain. It allows you to apply a sequence of operations to an observable in a concise and readable manner. In the context of NgRx effects (or RxJS in general), pipe is used to create a pipeline of operators that are applied to the stream of values emitted by an observable.



`ofType(fromUsers.createUsers.type)` filters the actions to only continue if the action type matches fromUsers.createUsers.type. 



`switchMap` is used to switch to a new observable generated by this.UserService.addUser(user). 



`map` transforms the result of adding a user into a new action of type fromUsers.createUserSuccess.



### ngrx router store:

`npm i @ngrx/router-store`

### ngrx store dev tools:

`npm i @ngrx/store-devtools`



### Or all in one:

`npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools @ngrx/router-store`