Redux from Scratch

[Fireship]

State management libraries like NgRx and NGXS are amazing tools, but building your own from scratch will help you understand this stuff at a fundamental level.

[amazinglazedonut]

On most tech or web development oriented channels, I watch at max speed and am able to at least get the gist. On this channel, I've had to reduce my playback speed to plain Jane 1x and am still finding myself having to rewatch certain sections before continuing on throughout the course of each densely packed <10 minute video. That said, I always close the tab having gained a material grasp of the topics covered, something that is becoming increasingly hard to say these days. Thank you for the continued edification Mr. Angular Firebase!

[nechitagabrieldotro]

I see a lot of people talking about Redux adding boilerplate and complexity and I tend to agree with them on some level.

I work on an entreprise app that doesn't use this type of architecture, rather it uses a simple Smart Components (parent components holding state) -> Dumb Components (stateless componentes) architecture and it works just fine because each module is quite isolated and deals with isolated endpoints and doesn't interact too much with the other modules (which take care of other isolated endpoints). Each module can be described as a micro-frontend.

Implementing a basic redux-pattern solution like the one Jeff demonstrates in the video is great for understanding when this type of managing state might need to be adopted.

The problem is that people sometimes implement different libraries in their projects because they think they need them (or just curious), before actually understanding the usefulness of those libraries, but the most important aspect is, I believe, they don't understand the TRADEOFFS. People should really think about the tradeoffs more often than they do. Even the creators of Redux advise against using Redux just for the sake of it. "If you think you don't need Redux, you probably don't need Redux".

In a small team that isn't familiar to the Redux pattern, a state management library like this might add complexity and discomfort. If this slows down the process and introduces bugs due to frustration and lack of knowledge, maybe it's best to avoid it in the first place, or just create your custom solution with simpler convensions like Jeff showed us.

Jeff, I really appreciate your videos, they're awesome. Keep up the great work. Your videos have some of the best ratios of likes/dislikes I've ever seen, and that means you are doing a great work of creating more responsible and knowledgeable developers.

[tovawr]

been a fan for a couple years, and these older videos are becoming useful too now that I'm learning Angular

[tntg]

My experience with Redux was a total waste of time.
I spent days introducing Redux into an existing project (about 20 Modules and a 100 components), and result was only more code, more complexity, less predictability throughout the code. Which leads to a whole new sets of bugs.
In your example, the complexity is not visible as you only have on component.
In a production app, you want to define (for each model) a state, actions, reducers, side effects, and create a huge number of subscriptions to wire the app.
As result, the app is relying on a library that is complex to maintain, and bug prone.
You can achieve the same result by creating an Injectable that will be hosting the data the app needs.
That service is responsible of creating and updating the data whenever it changes.
And any Component using that service will always have access to the latest data.

[phillip]

I find it interesting that you mentioned Lodash would provide better performance. I like Lodash, but I have been told its not worth using because you can do everything in javascript. Does it have better performance because its written in an ultra efficient way?

[designthala]

Please do a video explaining React Redux just like React hooks !

[kngjulien_]

This pattern is very simmilar to a finite state machine in digital electronics where you have a current state and a next state logic which will calculate the next state.

[aravind.a]

Can we have update version? Of this video.

[siddharthvenkatesh]

This is so beautiful. Thanks a lot man.

[worldclasscode]

Awesome! Can I get persistent state management with Redux? :)

[FredoCorleone]

So how does Redux devTools change the state when you go back in time?
You only connect it, without ever passing it the state itself but you send action type and next state.
So, from my understanding, the Redux devTools changes that "next" object passed in "send", right?
There's one thing I'm worried about, I don't think that state is immutable at all, if devTools is capable of changing it why wouldn't be possible for the developer to accidentally change the state without even dispatching an action?

[csgokul]

Hi Jeff, Is there any content you have for firebase storage's cache-control - Angular or ionic ?

[kamalkamals]

I guess it's a good way to use reduxe in angular, but you forgot to explain how combine stores part, to combine is use same service or another...etc ?

[mateja]

If web development were painting, they'd call you Picasso!

[belahcenebenzaratahar]

Just curious about how can you keep pasting code! is it some kind of pooled clipboard tool?

[Data-minerIo]

Thanks for the video. However the pasting of your code is extremely difficult to watch. It break the visual queue which helps the user focus on the place that the code changes. So I often have to pause the video to see what changed. People don't mind if the video is long they can always skip ahead. Thanks again.

[dreamwalker]

can you give an advice when is better to use RxJS and when NgRx/NGXS?

[kardashevr]

I neither understand what it is after watching countless videos nor how to implement it, nor why I need it in my application.

[mukhsin]

This is a goo tutorial, but I think it's too fast to understand by undoing your code.
I think it will be better to explain the code by typing them by your self.
Anyway, this is a good tutorial to open my mind about redux.