End to end todo list app with NestJs - Angular - Redux & Redux Saga

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

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

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

NestJs
A new framework for building eﬃcient, 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

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 ?

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>) {}

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

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

What
about
Redux ?
State management library for applications

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

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,
};

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

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;
}

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
};

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) {}
}

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

End to end todo list app with NestJs - Angular - Redux & Redux Saga

More Related Content

What's hot (20)

Similar to End to end todo list app with NestJs - Angular - Redux & Redux Saga (20)

Recently uploaded (20)

End to end todo list app with NestJs - Angular - Redux & Redux Saga