Angular Redux - NgRx Angular, NgRx store, NgRx Effects, NgRx selectors

Angular Redux - NgRx Angular, NgRx store, NgRx Effects, NgRx selectors

Monsterlessons Academy

1 год назад

60,890 Просмотров

Learn how to implement Angular Redux with NgRx. NgRx Angular is the most popular solution for state management inside applications. If is typically used with NgRx store, ngRx selectors, NgRx effects and NgRx reducers. Here we will bind everything to Angular application on a simple example.

TIMESTAMPS
0:00 Introduction
2:08 Installing packages
3:50 Binding store
5:21 Creating state
6:59 Creating actions
8:16 Creating a reducer
10:50 Adding reducer to store
13:58 Adding selectors
19:27 Adding effects
23:05 Writing effects
28:36 Rendering information

► CHECK MY COURSES - https://monsterlessons-academy.com/courses

FOLLOW ME
► TWITTER - https://twitter.com/monster_lessons

REFERENCES
► Source code - https://github.com/monsterlessonsacademy/monsterlessonsacademy/tree/233-ngrx-angular

RECOMMENDED VIDEOS
► My editor setup for web development - https://youtu.be/YrLiugDhCuk
► Angular Tutorial for Beginners - https://youtu.be/Pd98NIR63cU
► Vue JS Crash Course - https://youtu.be/89z5opT_3so
► React Hooks Full Course - https://youtu.be/h7RC-aVmPqE
► Typescript Course for Beginners - https://youtu.be/RXZoCljqYOE
► Build a Todo App with Angular - https://youtu.be/uyTC0Skvvls
► Creating custom select library - https://youtu.be/jZDWjMh32E0
► HTML Price comparison - https://youtu.be/D6r6yYIw5uc
► How to build Quiz with React hooks - https://youtu.be/lI_ReTTUFU0

MY COURSES
► NestJS course - https://youtu.be/MNa-h_uPNmw
► Docker + Docker compose course - https://youtu.be/tPMk5UCvucM
► Angular + NgRx course - https://youtu.be/DyklxnC2XP0
► Vue + Vuex course - https://youtu.be/RjNA1v7OuUs
► React hooks course - https://youtu.be/nC8JPlimn8E

Тэги:

#ngrx #ngrx_store #ngrx_angular #angular_redux #angular_ngrx #angular_store #ngrx_effects #ngrx_entity #ngrx_selectors
Ссылки и html тэги не поддерживаются


Комментарии:

Trilok Singh
Trilok Singh - 16.08.2023 21:23

God bless 🙌 🙏. Please provide unit testing tutorial and agile scrum

Ответить
40tx
40tx - 09.08.2023 04:28

Most excellent sir

Ответить
Senka Matic
Senka Matic - 24.07.2023 15:52

Hi))) But api doesn't work: Cors policy((((((

Ответить
youme77324
youme77324 - 03.07.2023 20:11

Thanks for the course. Code is accumulating fast and I'm 1 hr in. Is there a GitHub repo for this?

Ответить
Paul Welby
Paul Welby - 16.06.2023 17:11

createFeatureSelectoris is deprecated with two arguments. --> export const authFeatureSelector = createFeatureSelector<AppStateInterface, AuthStateInterface>('auth') not working. Line shows in createFeatureSelector, and app crashes. If I comment out AppStateInterface it runs with the existing AuthStateInterface, but no output is showing in the selector

Ответить
Paul Welby
Paul Welby - 16.06.2023 00:06

getting error on install of store-devtools: Module not found: package path .rxjs-interop is not exported from package...

Ответить
Paul Welby
Paul Welby - 15.06.2023 17:51

Curious why you don't offer your course as Github versioned references so as to stop typos.

Ответить
Othmane Hemamou
Othmane Hemamou - 07.06.2023 17:02

Hello thx for the content, it's very helpful but what is the meaning of ...state in 2.10.07 ? plz

Ответить
Surya K
Surya K - 21.05.2023 10:07

Excellent....

Ответить
Alex Matveev
Alex Matveev - 03.05.2023 15:36

thanks a lot for your great work. BTW do you have this code in git? if yes - could you provide link

Ответить
Alex Yunchic
Alex Yunchic - 13.04.2023 22:55

Спасибо большое!

Ответить
Dragos P.
Dragos P. - 10.04.2023 14:40

bro use VSC

Ответить
J R
J R - 18.03.2023 05:05

don't put your shared folder right after something called globalFeed. confusing

Ответить
Reyhan Dağcı
Reyhan Dağcı - 17.03.2023 13:26

Hello thanks for the video. I have successfully completed the video but in the end, even if my web-pack is compiled successfully, I see blank browser page right now. There is no error in console btw. Any thoughts about that ?

Ответить
Dennis Kessler
Dennis Kessler - 28.02.2023 16:00

Hey there! First of all: Thanks for your great content: I have a question though. When I leave out the [formGroup]="form I get this error: NG01050: formControlName must be used with a parent formGroup directive. This is perfectly understandable, but only shown in the browser. Do you know how to get VSCode to show this error in the html file?

Ответить
HFM M
HFM M - 02.02.2023 19:25

After this course which I am still working through and I plan on finishing the full course. I Can say my understanding of NgRx went from pure confusion to understanding it way better then before. I would like to say thank you for making this project possible. For those that are hesitant about purchasing the full course, I say you are missing out.

Ответить
ahmed razzak
ahmed razzak - 23.01.2023 19:08

how this is possible :
export interface RegisterRequestInterface{
User : {
Username: string,
Email : string,
Password : string
}
}


const registerAction = createAction(
'some type',
props<{Request: RegisterRequestInterface}>());

and then calling the action with formvalues which are flatten without the RequestProperty or the User property



can someone explain plz

Ответить
cherif barry
cherif barry - 16.01.2023 13:07

thank you for this complete guide. Do you have a git repo for the full code.

Ответить
Daniel Koett
Daniel Koett - 05.01.2023 21:45

Hey, great content..I already got your full course. Any chance you will be coming out with a video series on Angular testing ? That would be awesome

Ответить