Documentos de Académico
Documentos de Profesional
Documentos de Cultura
ichi.pro
1 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
Proyecto de ejemplo
Cómo funciona
Prerrequisitos
Instalación
Implementación de API
Implementación de NGRX
Implementación angular
2 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
Resumen
Conclusión
3 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
Proyecto de ejemplo
Aquí está el proyecto de ejemplo en GitHub donde puede clonarlo
y ejecutarlo en su máquina local.
4 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
Tienda NGRX
Actualizar o volver a cargar la página perderá todo el estado de la
aplicación. Ahí es cuando entra en juego el almacenamiento local.
El estado completo de la aplicación se serializa y se guarda en el
almacenamiento local justo antes de volver a cargar la página y
todo el estado se deserializa del almacenamiento local y se
5 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
6 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
Los efectos NGRX son las funciones que se pueden ejecutar para
obtener los nuevos datos para el estado. Por ejemplo, si su
componente necesita nuevos datos de la API, el componente envía
una acción, los reductores invocan los efectos y servicios para
7 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
NodeJS
CLI angular
Mecanografiado
VSCode
ngx-bootstrap
NGRX
Instalación
8 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
9 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
randomId = require('random-id')
bodyParser = require("body-parser");
port = 3080;
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, '../ui/build')));
10 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
console.log('api/users called!')
res.json(users);
});
users.push(user);
res.json("user addedd");
});
if (usersFound.length > 0) {
11 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
} else {
});
users.push(user);
});
res.json(tasks);
});
12 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
const id = randomId(idlen);
task.id = id;
tasks.push(task);
});
const id = req.params.id;
});
13 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
return tsk;
});
});
res.sendFile(path.join(__dirname, '../ui/build/index.html'));
});
app.listen(port, () => {
});
14 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
"name": "api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
},
"keywords": [],
"author": "",
"license": "ISC",
15 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
"dependencies": {
"express": "^4.17.1",
"random-id": "^1.0.4"
},
"devDependencies": {
"nodemon": "^2.0.4"
16 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
Demostración de API
Implementación de NGRX
17 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
18 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
Estado de la aplicación
19 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
USER_LOGIN,
props<{user: User}>()
);
USER_LOGIN_SUCCESS,
props<any>()
USER_LOGIN_FAILURE,
props<{message: string}>()
20 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
USER_SIGNUP,
props<{user: User}>()
);
USER_SIGNUP_SUCCESS,
21 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
props<any>()
USER_SIGNUP_FAILURE,
props<{message: string}>()
22 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
@Injectable()
constructor(
) {}
this.actions$.pipe(
ofType(userActions.login),
exhaustMap(action =>
this.appService.login(action.user).pipe(
23 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
);
this.actions$.pipe(
ofType(userActions.signup),
exhaustMap(action =>
this.appService.signup(action.user).pipe(
);
24 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
user: User;
result: any;
isLoading: boolean;
isLoadingSuccess: boolean;
isLoadingFailure: boolean;
25 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
user: storage.getItem('user').user,
result: '',
isLoading: false,
isLoadingSuccess: false,
isLoadingFailure: false
};
initialState,
26 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
);
return {
user: state.user,
isLoadingSuccess: state.isLoadingSuccess
};
return {
user: state.user,
27 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
result: state.result,
isLoading: state.isLoading,
isLoadingSuccess: state.isLoadingSuccess
};
return {
user: state.user,
result: state.result,
isLoading: state.isLoading,
isLoadingSuccess: state.isLoadingSuccess
};
28 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
29 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
GET_TASKS
);
GET_TASKS_SUCCESS,
props<any>()
30 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
);
GET_TASKS_FAILURE,
props<{any}>()
);
CREATE_TASK,
props<{task: any}>()
);
CREATE_TASK_SUCCESS,
props<any>()
);
31 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
CREATE_TASK_FAILURE,
props<{any}>()
);
DELETE_TASK,
props<{taskid}>()
);
DELETE_TASK_SUCCESS,
props<any>()
);
DELETE_TASK_FAILURE,
props<{any}>()
32 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
);
EDIT_TASK,
props<{task: any}>()
);
EDIT_TASK_SUCCESS,
props<any>()
);
EDIT_TASK_FAILURE,
props<{any}>()
);
Dado que las acciones de todo deben llamar a la API para crear,
eliminar, editar y obtener tareas de la API. Necesita definir los
33 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
@Injectable()
constructor(
) {}
34 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
this.actions$.pipe(
ofType(todoActions.getTasks),
exhaustMap(action =>
this.todoService.getTasks().pipe(
map(response => {
console.log("response:::", response)
return todoActions.getTasksSuccess({response})
}),
);
this.actions$.pipe(
35 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
ofType(todoActions.createTask),
exhaustMap(action =>
this.todoService.addTask(action.task).pipe(
);
this.actions$.pipe(
ofType(todoActions.deleteTask),
exhaustMap(action =>
this.todoService.deleteTask(action.taskid).pipe(
36 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
);
this.actions$.pipe(
ofType(todoActions.editTask),
exhaustMap(action =>
this.todoService.editTask(action.task).pipe(
37 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
);
38 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
tasks?: Task[];
currentTask?: Task;
deleteTaskId?: any;
result?: any;
isLoading?: boolean;
isLoadingSuccess?: boolean;
isLoadingFailure?: boolean;
tasks: storage.getItem('todo').tasks,
currentTask: {},
deleteTaskId: '',
result: '',
isLoading: false,
isLoadingSuccess: false,
39 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
isLoadingFailure: false
};
initialState,
// GeTasks
40 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
currentTask.id = result.taskId;
tasks.push(currentTask);
return {
tasks,
isLoading: false,
isLoadingSuccess: true
};
}),
41 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
if (result.status) {
return {
tasks,
isLoading: false,
isLoadingSuccess: true
};
}),
42 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
_.cloneDeep(state.currentTask) : {};
tsk = currentTask;
return tsk;
});
return {
tasks,
isLoading: false,
isLoadingSuccess: true
};
})
);
43 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
any {
return {
tasks: state.tasks,
isLoading: state.isLoading,
isLoadingSuccess: state.isLoadingSuccess
};
};
import {
ActionReducer,
ActionReducerMap,
44 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
createFeatureSelector,
createSelector,
MetaReducer
} from '@ngrx/store';
user: fromUser.State;
todo: fromTodo.State;
user: fromUser.reducer,
todo: fromTodo.reducer,
45 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
};
console.log('state', state);
console.log('action', action);
};
46 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
getLoginState,
fromUser.getLoggedInUser
);
getLoginState,
fromUser.userLogin
);
getLoginState,
47 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
fromUser.userSignup
);
geTodoState,
fromTodo.getTasks
);
Implementación angular
48 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
49 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
BrowserAnimationsModule,
HttpClientModule,
DashboardModule,
SharedModule,
50 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
LoginModule,
ModalModule.forRoot(),
StoreModule.forRoot(reducers, {
metaReducers
}),
EffectsModule.forRoot([UserEffects, TodoEffects])
],
providers: [],
bootstrap: [AppComponent]
})
51 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
52 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
this.store.select(fromRoot.userLogin).pipe(
takeUntil(this.destroy$)
).subscribe(data => {
console.log('data::::', data);
this.router.navigate(['/dashboard']);
});
ngOnInit() {
53 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
onSubmit(loginForm: NgForm) {
console.log(this.model)
this.store.dispatch(userActions.login({user: { email:
this.model.email, password: this.model.password }}));
ngOnDestroy(){
this.destroy$.next(true);
this.destroy$.unsubscribe();
constructor(
){}
54 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
Aquí están las API que son llamadas por efectos NGRX
@Injectable({
providedIn: 'root'
})
55 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
loginUrl = '/api/login';
signupUrl = '/api/signup';
this.userLoggedIn.next(false);
setUserLoggedIn(userLoggedIn: boolean) {
this.userLoggedIn.next(userLoggedIn);
getUserLoggedIn(): Observable<boolean> {
return this.userLoggedIn.asObservable();
login(user: any) {
56 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
catchError(err => {
console.log(err);
return of([]);
})
);
signup(user: any) {
57 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
catchError(err => {
console.log(err);
return of([]);
})
);
@Injectable({
providedIn: 'root'
})
58 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
rootURL = '/api';
getTasks() {
addTask(task: any) {
editTask(task: any) {
deleteTask(taskId: any) {
59 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
return this.http.delete(`${this.rootURL}/task/${taskId}`);
Resumen
60 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
Los efectos NGRX son las funciones que se pueden ejecutar para
obtener los nuevos datos para el estado. Por ejemplo, si su
componente necesita nuevos datos de la API, el componente envía
una acción, los reductores invocan los efectos y servicios para
obtener los nuevos datos, el reductor devuelve el nuevo estado con
esos datos de la API.
61 of 62 7/25/21, 13:49
Cómo implementar la tienda NGRX en aplicaciones angulares about:reader?url=https://ichi.pro/es/como-implementar-la-tienda-ngrx-en-aplica...
62 of 62 7/25/21, 13:49