AiA 214: NgRx Tips & Tricks with Adrian Fâciu

Panel:

• Charles Max Wood
• John Papa

Special Guest: Adrian Faciu In this episode, Chuck talks with Adrian Faciu who is a developer for Visma and is a blogger. The panel talks to Adrian about his blog titled, “NgRx Tips & Tricks.” They ask Adrian in-depth questions about NgRx, among many other topics. Listen to today’s episode for more details!Show Topics:0:00 – Advertisement: AngularBootCamp.Com 0:55 – Chuck: Hi! Our guest is Adrian Faciu. 1:10 – Guest: Hello! I am Adrian and I am a developer who works for a Norwegian company, but I live in Romania!1:35 – Chuck.1:36 – Guest.1:47 – Chuck: The market is so global. I have talked with many different guests from different parts of the world – it’s really neat! It’s this global phenomenon.2:12 – Guest: It’s a great thing!2:23 – Chuck: They have an office where you live?2:31 – Yes.2:37 – Chuck: How are you guys using Angular over there?2:47 – Guest: We have several different products. We customize using them with internalized tools.3:04 – Chuck: Real quick let’s talk about your blog post. I will admit I am not that familiar with NgRx, so I will ask newbie questions. Now do you want to explain what this is?3:41 – Guest: Sure! The short story of the article is I saw people doing things the hard way. And after I figured out some things, people encouraged me to write about my experience.4:37 – Chuck: John Papa just signed-in!4:53 – Guest: Yes NgRx is...5:02 – Chuck: You used classes for all actions what do you mean by that?5:05 – Guest answers the question into detail. 6:31 – Chuck: Let’s say we have a class that uses a log error...6:42 – Guest: For example you have actions that...7:02 – Chuck: When you use the reducer...7:10 – Guest: There are other tricks we can use like keeping all of them in the same file...8:00 – Guest talks about the union type.8:24 – Chuck: You learned this by doing things wrong – what happens when you do these things wrong?8:30 – Guest: If you don’t put all of your classes in the right file then you end up with a lot of files. If you don’t create hero types then you’d have to...10:02 – Chuck: If you import user actions then does it import all of the other types?10:08 – Guest: Import everything from that file.10:17 – Chuck: If you have any questions, John, feel free to chime-in!10:29 – John: Yeah I am scanning through this.The negative I hear a lot of through actions, it’s cause we create constants – the action class creators, it seems to cause an undue amount of stress. How much actual code do you actually have to write – how do you feel about that?11:12 – Guest: I didn’t want to write all of this code! That’s what I wanted to avoid.11:44 – John: I wrote them, didn’t like them, I went back to them...It wasn’t just that I created a new action I had to create the constant and other things – also the place you do the union type, I’d forget to do the union type at the end! If you don’t have all of those things then it won’t work. Even on a simple project I’d have 120 lines of code for a simple task.12:49 – Guest: Yes. Sometimes I would forget this or that. I’d have to figure out what I did wrong. I went back and created classes for a lot of things. I like the benefits.13:19 – John: I like your ideas and your tips in your blog. How do you feel about the NAMES of those actions?13:55 – Guest.14:51 – John: Important part is the naming of the string inside of it – that’s the value...So you can see the actions that are being displayed.15:25 – Guest: If you didn’t do it right that’s where the problem would be.15:38 – John: To me it’s a love/hate relationship b/c there is so much code to it. I usually copy and paste which means that I usually forget to change something. I agree, but I don’t’ like creating it.16:05 – Guest: I’ve been trying to figure out a solution for it eventually I gave up.16:23 – John: Moving onto effects – inside that happens inside of the Redux cycle – if you want to do something outside of it that’s when you do effects right?16:40 – Guest.16:49 – John: Using the effects is good or do it a different way?17: 20 – Guest: It makes my components cleaner. I have seen projects that DON’T use it and it’s not the best.17:36 – John: Like getting a list of customers...(I am using my hands and nobody can see me!)It’s weird to me to NOT use the effects!18:52 – Guest: If you implement some type of caching then it’s everything to put everything in the state.19:07 – Chuck: I haven’t used it as much as I would like, but I haven’t do much with it.19:23 – John: I am curious from somebody hasn’t dove into it – does effects make sense to you, Chuck?19:39 – Chuck: It seems like effects is a side effect? Like calling out an external API...20:10 – John: Yeah even multiple effects.John asks a question.20:23 – Guest answers the question. 20:29 – Chuck: I like that you can make constrained assumptions and all of the complicated...21:10 – Guest: I am using my effects like functions.21:26 – John’s question. 21:31 – Chuck: Doing everything!You said implement the 2-payload method – that doesn’t make sense?21:43 – Guest: Not 100% convinced you need it. What people are doing on these actions...22:43 – Chuck: How much magic you want?22:50 – Guest.22:59 – John: I am confused about ERROR HANDLING. What do you advise for people to do?23:21 – Guest: Basically, when you deal with that effect you deal with the actions, and the actions...If you get an error on it it’s done. I was trying to explain there that...do it on another stream. Try it on another stream and handle it. What happened to me – I did it on the action state and I got an error and then everything will stop.24:27 – John: That’s not good!24:32 – Chuck.24:35 – John: Good tip!24:40 – Chuck: Angular has gotten better at that. I still find, though...25:06 – John.25:16 – John: Hey I appreciate these blog posts that don’t always show the happy path. To show the unhappy path is a good idea.25:32 – Chuck.26:00 – Going down your list, Adrian, let’s talk about effects are services. I agree, but not that we have...26:24 – Guest: I have seen cases where people forget that. They say I want to call a service, how do I do that? They forget...26:50 – John: You have to provide your services somewhere. The old way was you could go into the...What do you do?27:28 – Guest: Most of the applications...28:17 – John.28:25 – Chuck: I love deleting code!28:32 – John: You end up in a spaghetti pool, though, if you needed that deleted code. Nooooo!!!29:00 – Chuck.29:01 – Guest.29:10 – Advertisement: Get A Coder Job! 29:49 – John: Let’s talk about reducers – the smallest part of your tip sections. You say, “keep them simple” – how do you keep them simple?30:07 – Guest: I have received this observation from several people. This is the biggest problem I had.How to keep them simple...31:08 – John: When someone makes that type of code – where would you want them to put it?31:23 – Guest: It depends on different types of actions. Maybe I have some sort of matter that I added to the data – an action from my application we can catch it into an effect and...Not all of the actions have to go to the reducer.32:04 – John: I say, “Hmm...” when I see reducers like this...they are running a synchronized code inside of a reducer. And I see that a lot.32:24 – Chuck.32:28 – John: You go call a reaction, and...sometimes they are doing HTP there, but it’s hard to explain.33:11 – John: What are some of the things that they can do to step-into, when they are using these?33:16 – Guest: That’s why I only have these things about the reducers.33:48 – Chuck: I am wondering what is the life cycle look like? What do you call a reducer from an effect from an action or vice versa?34:09 – Guest answers the question. 34:37 – John: It can be confusing with all of these different terms. Where does it end? Your component you have to say: call this action. Perform this action and then the action says get customers – the NgRx library listens for that and helps connect to the reducer for you. Look into the action and then return that to a stream to whatever...35:29 – Guest: Yes, it sends it to reducers.Guest goes into more detail.36:09 – John: You never talk to the reducer directly?36:17 – Chuck: ...is that something I should have done before – or does it call effects and the effects load the information into the state and the reducer pulls it out for the action?36:46 – Guest.36:58 – Chuck.37:03 – Guest.37:53 – John: It really depends on what you want to do, Chuck.John will give a hypothetical scenario. 38:58 – Chuck: In your scenario, let’s say...39:14 – John: Everything is right up until the end there.It’s a little magical, honestly. I just know here is my selector and here is my data!40:17 – Chuck: Selector is essentially I am interested in THIS state or THIS state change.40:40 – Guest.40:50 –

Become a supporter of this podcast: https://www.spreaker.com/podcast/adventures-in-angular--6102018/support.