The document discusses building a todo list application using NestJS for the backend API, Angular for the frontend, and Redux/Redux Saga for state management. It provides an overview of setting up the NestJS API including creating modules, services, and connecting to MongoDB. It then covers generating the initial Angular application and importing Redux libraries. Finally, it details how to manage application state with Redux including creating actions, reducers, effects, and selectors and integrating them with the Angular application and NestJS services.

1. End to end todo list app with
NestJs - Angular - Redux &
Redux Saga
Babacar NIANG

2. Agenda
Create nest API
Create Angular App
What about Redux ?
Managing angular store
Who I am ?

3. Console.log(me);
{
fullName: ‘Babacar NIANG’,
nicknames: [‘Basse’, ‘eagledev’],
company: ‘Weego’,
twitter: ‘@Babacar_Basse’,
email: ‘babacar.basse@esp.sn’
}

4. NestJs
A new framework for building efficient, scalable Node.js
server-side applications.
It uses JavaScript, is built with and fully supports TypeScript.
Also allows developers to code in pure JavaScript
npm install -g @nestjs/cli
nest new dpjs-weego
nest generate module

5. NestJs
First determine the DTO (Data Transfer Object) schema request
A DTO is an object that defines how the data will be sent over the network.
Define endpoint:
@Post()
async createTodo(@Body() todo: TodoDTO)
Url with parameters
@Get(‘id’)
findOne(@Param('id') id: string)
How to allow request with a specific payload ?

6. NestJs
npm install --save @nestjs/mongoose mongoose
MongoDB with Nest ?
Import MongooseModule into app.module
MongooseModule.forRoot('mongodb://localhost/nest')
Create Schemas DB
Import Schema model into the module
MongooseModule.forFeature([{ name: 'Todo', schema: TodoSchema }])
Finally inject the Model in the service
constructor(@InjectModel('Todo') private readonly todoModel:
Model<ITodo>) {}

7. NestJs
https://docs.nestjs.com/techniques/hot-reload
For hot reload
Exception filters
throw new HttpException('todo not found', HttpStatus.NOT_FOUND);

8. Create
Angular
App
https://angular.io/docs
npm install -g @angular/cli

9. What
about
Redux ?
State management library for applications

10. Managing
angular
store
@ngrx
npm install --save @ngrx/core
npm install --save @ngrx/effects
npm install --save @ngrx/entity
npm install --save @ngrx/router-store
npm install --save @ngrx/store
npm install --save @ngrx/store-devtools

11. Managing
angular
store
Create store
store
actions
effects
reducers
selectors
state
Interface App State
export interface IAppState {
router?: RouterReducerState;
}
App Reducers
export const appReducers: ActionReducerMap<IAppState, any> = {
router: routerReducer,
};

12. Managing
angular
store
StoreRouterConnectingModule.forRoot({ stateKey: 'router' }),
!environment.production ? StoreDevtoolsModule.instrument() : [],
EffectsModule.forRoot(AllEffects),
Import Store Router, StoreDevTools and Effects modules into app.module
StoreModule.forRoot(appReducers)
Import Store with appReducers forRoot into app.module

13. Managing
angular
store
Create todo Actions
export class GetTodoList implements Action {
public readonly type = ETodoActions.GetTodoList;
constructor() {}
}
.
….
export type TodoListActions = GetTodoList | GetTodoListSuccess |
GetTodoListError;
Create todo State
export interface ITodoListState {
data: Array<ITodo>;
loaded: boolean;
loading: boolean;
error: any;
}

14. Managing
angular
store
Create todo reducer
export function todoReducer(state = initialTodoListState,
action: TodoActions): ITodoListState {
switch(action.type) {
…..
default: return state;
}
}
Add todo state to App State
export interface IAppState {
router?: RouterReducerState;
todolist: ITodoListState
}
Add todo reducer into App Reducers
export const appReducers: ActionReducerMap<IAppState, any> = {
router: routerReducer,
todolist: todoReducer
};

15. Managing
angular
store
Create todo selector
export const selectTodoList = (state: IAppState) => state.todolist;
Create todo effects
@Injectable()
export class TodoEffects {
@Effect()
getTodoList$ = this.action$.pipe(
ofType<GetTodoList>(ETodoActions.GetTodoList),
switchMap(() => this.todoService.getTodoList()),
switchMap(todos => of(new GetTodoListSuccess(todos))),
catchError(err => of(new GetTodoListError(err)))
);
constructor(private action$: Actions, private todoService: TodoService) {}
}

16. Managing
angular
store
Select todo List state from the store
$todoListState = this.store.pipe(select(selectTodoList));
https://ngrx.io/docs
For more documentation
https://github.com/babacarbasse/todolist-app
Repo Github

17. Kill -9