Angular @ngrx/store Side-By-Side Code Comparison
Here I compare two ways of displaying Todo between using @ngrx/store and without using it.
Assuming readers understand Angular HTTP call, from below here, I want to compare files side-by-side, so that you can see what difference they have.
app.module.ts
With @ngrx/store, we need to import reducers and effects at the app root level.
app.component.ts
Without @ngrx/store, data is retrieved from a service.
Unlike a normal service, with @ngrx/store is todos$ are retrieved from store.select after calling store.dispatch(getTodos()), which is linked to getTodos$ property in todos.effetcs.ts.
app.component.html (the same)
todo.component.ts(the same)
todo.component.ts(the same)
todos.service.ts(the same)
todos.reducters.ts
It defines pure functions which implement action with two parameters; type, and payload.
todos.effects.ts
It defines a function to be executed when store.dispatch is called.
This is my first trial of understanding @ngrx/store, and I might not have clearly understand the benefits of using @ngrx/store. However, I wish this side-by-side comparison is helpful to others.
Cheers
