Angular Ngrx Crud Demo
This project display a simple list of games that can be updated, removed, viewed and inserted a new one using http services (through HttpClient) and @ngrx/store and @ngrx/effects libraries grouping information by modules. The ngrx is a Redux inspired library created for Angular to manage the state changes. This project was generated with Angular CLI version 1.6.0.
Getting Started
To start using the application follow the next steps:
Get the Code
git clone https://github.com/yduartep/angular-ngrx-crud.git
cd angular-ngrx-crud
npm i
Mock server
Run npm run start:mocks
for a mock server. Navigate to http://localhost:3000/api/games
to obtain the list of games or to http://localhost:3000/api/platforms
to see the actual list of game platforms. The api rest is built using json-server library.
Development server
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Functionalities
How to EDIT a game using Ngrx/store & Effects:
- To edit a game, the system dispatch an event with the action "UPDATE_GAME".
- The reducer related to the module games is executed and the state is changed updating the information of specific game.
- An “ngrx effect” class is implemented (GameEffects) by module and will be triggered when we dispatch actions with the store.
- Using some selectors defined in my reducer class, we can monitor the success of each action and exceute some specific code after that (like display a success message and/or come back to the home page).
See next diagram:
Structure
-
Each module have a folder store where will be saved the actions (games.actions.ts), effects (games.effects.ts) and reducers (games.reducers.ts).
-
In the module class (games.module.ts) are imported the reducers to be called by each feature using the class StoreModule and also the EffectsModule.
const reducers: ActionReducerMap<any> = {
games: gameReducer.reducer,
platforms: platformReducer.reducer
};
@NgModule({
imports: [
SharedModule,
GamesRoutingModule,
StoreModule.forRoot(reducers),
EffectsModule.forRoot([GameEffects, PlatformEffects])
], ...
})
export class GamesModule {}
- In the main component of the specific module (games.component.ts), I have centralized all the actions to be executed when a CRUD operation has successfully finish or the error thrown using a subscription to the specific select defined in the reducer:
this.store.select(isDeleted).subscribe((deleted) => {
this.actionSuccess(...);
});
this.store.select(getDeleteError).subscribe((error) => {
this.actionError(...);
});
Useful Commands
Code scaffolding
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Build
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the -prod
flag for a production build.
Running unit tests
Run ng test
to execute the unit tests via Karma.
Running end-to-end tests
Run ng e2e
to execute the end-to-end tests via Protractor.
Further help
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.