- 25
- 28 383
Jan Hesters
Germany
Приєднався 20 чер 2024
Subscribe to master React, Next.js, Remix and engineering management.
I was the 7th employee at Hopin and built out the frontend, which scaled to millions of users as the company grew from a $6 million to a $7.7 billion valuation. Then I co-founded ReactSquad, a marketplace of vetted senior React developers for SaaS companies.
If you’re expanding your team and need to hire React developers book your free discovery call today! 👉 www.reactsquad.io/schedule-a-call
I was the 7th employee at Hopin and built out the frontend, which scaled to millions of users as the company grew from a $6 million to a $7.7 billion valuation. Then I co-founded ReactSquad, a marketplace of vetted senior React developers for SaaS companies.
If you’re expanding your team and need to hire React developers book your free discovery call today! 👉 www.reactsquad.io/schedule-a-call
Redux Saga Is Hard Until You Look Under The Hood
Want to hire a senior React developer? Visit reactsquad.io/jan now!
If you’re expanding your team and need to hire React developers book your free discovery call today! 👉 www.reactsquad.io/schedule-a-call-today
--------------------------------------------------------------
In Part 2 of this Redux series, you explore What is Redux Saga? and Why Redux Saga?
Learn how to set up Redux in a Next.js project, create reducers and action creators, and dive deep into essential Redux Saga effects like take, put, select, and call.
This tutorial covers building custom saga middleware from scratch, implementing example sagas to handle complex asynchronous operations, and understanding how to isolate side effects for cleaner, more maintainable code.
Whether you're wondering "How to use the call effect in Redux Saga?" or "Why choose Redux Saga and why choose RTK Query?", this video provides clear, step-by-step guidance to help you manage side effects effectively in your Redux applications. Perfect for both beginners and advanced developers looking to enhance their Redux skills and tackle real-world projects with confidence.
-------------------------------------------------------------
Follow all of these to become a 10x developer:
• Twitter - janhesters
• Jan Hesters - janhesters.com/
• LinkedIn - www.linkedin.com/in/jan-hesters/
And remember to subscribe here on UA-cam now!
--------------------------------------------------------------
If you’re new to my channel, my name is Jan Hesters. I’m the CTO of ReactSquad.io. It’s a marketplace of vetted senior React developers for SaaS companies. We provide developers to dozens of companies, including some in the Fortune 500.
--------------------------------------------------------------
For any questions or inquiries regarding this video, or working with Jan Hesters & ReactSquad, please reach out to: jan@reactsquad.io
--------------------------------------------------------------
Chapters:
01:37 - Setting Up Your Store & Reducers
02:53 - Redux Saga Definition
03:56 - Redux Saga Example
06:07 - take effect
07:39 - put effect
08:17 - What are Sagas?
09:47 - Saga Middleware
13:35 - select effect
14:58 - call effect
18:27 - Outro
If you’re expanding your team and need to hire React developers book your free discovery call today! 👉 www.reactsquad.io/schedule-a-call-today
--------------------------------------------------------------
In Part 2 of this Redux series, you explore What is Redux Saga? and Why Redux Saga?
Learn how to set up Redux in a Next.js project, create reducers and action creators, and dive deep into essential Redux Saga effects like take, put, select, and call.
This tutorial covers building custom saga middleware from scratch, implementing example sagas to handle complex asynchronous operations, and understanding how to isolate side effects for cleaner, more maintainable code.
Whether you're wondering "How to use the call effect in Redux Saga?" or "Why choose Redux Saga and why choose RTK Query?", this video provides clear, step-by-step guidance to help you manage side effects effectively in your Redux applications. Perfect for both beginners and advanced developers looking to enhance their Redux skills and tackle real-world projects with confidence.
-------------------------------------------------------------
Follow all of these to become a 10x developer:
• Twitter - janhesters
• Jan Hesters - janhesters.com/
• LinkedIn - www.linkedin.com/in/jan-hesters/
And remember to subscribe here on UA-cam now!
--------------------------------------------------------------
If you’re new to my channel, my name is Jan Hesters. I’m the CTO of ReactSquad.io. It’s a marketplace of vetted senior React developers for SaaS companies. We provide developers to dozens of companies, including some in the Fortune 500.
--------------------------------------------------------------
For any questions or inquiries regarding this video, or working with Jan Hesters & ReactSquad, please reach out to: jan@reactsquad.io
--------------------------------------------------------------
Chapters:
01:37 - Setting Up Your Store & Reducers
02:53 - Redux Saga Definition
03:56 - Redux Saga Example
06:07 - take effect
07:39 - put effect
08:17 - What are Sagas?
09:47 - Saga Middleware
13:35 - select effect
14:58 - call effect
18:27 - Outro
Переглядів: 440
Відео
What is Redux? Get A Senior Understanding of How Redux Works
Переглядів 866Місяць тому
Want to hire a senior React developer? Visit reactsquad.io/jan now! If you’re expanding your team and need to hire React developers book your free discovery call today! 👉 www.reactsquad.io/schedule-a-call-today Learn Redux in 2025 and beyond. In this video, discover how Redux simplifies complex state management. See why Redux became so popular and learn what made it less trendy in recent years....
The Secret to Better APIs. You’re Not Using It.
Переглядів 1,4 тис.2 місяці тому
Want to hire a senior React developer? Visit reactsquad.io/jan now! If you’re expanding your team and need to hire React developers book your free discovery call today! 👉 www.reactsquad.io/schedule-a-call-today Have you ever started a code a project full of excitement only to find yourself tangled in a web of confusing code and unclear APIs? You’re not alone. This tutorial shows you the little-...
How To Set Up Next.js 15 For Production In 2025
Переглядів 6 тис.3 місяці тому
Want to hire a senior React developer? Visit reactsquad.io/jan now! If you’re expanding your team and need to hire React developers book your free discovery call today! 👉 www.reactsquad.io/schedule-a-call Learn how you can set up a scalable Next.js app (with React). This video covers everything from initial configuration with TypeScript, Tailwind CSS, and ESLint to advanced topics like internat...
What Is Memoization? (In JavaScript And TypeScript)
Переглядів 4723 місяці тому
What Is Memoization? (In JavaScript And TypeScript)
Unleash JavaScript's Potential With Functional Programming
Переглядів 5 тис.3 місяці тому
Unleash JavaScript's Potential With Functional Programming
Higher-Order Components Are Misunderstood In React
Переглядів 2,2 тис.4 місяці тому
Higher-Order Components Are Misunderstood In React
12 Keys to Write Senior-Level Tests (Test Desiderata in JavaScript)
Переглядів 5414 місяці тому
12 Keys to Write Senior-Level Tests (Test Desiderata in JavaScript)
JavaScript Generators Explained, But On A Senior-Level
Переглядів 1,7 тис.5 місяців тому
JavaScript Generators Explained, But On A Senior-Level
Build A React Native App With Multiple Screens Masterclass
Переглядів 1,9 тис.6 місяців тому
Build A React Native App With Multiple Screens Masterclass
Amazing 🔥🔥
Thank you! What would you like to see next?
This is an AI robot trained on web Dev, well it's chest is hairless too 😢.
I can only grow codebases, but no chest hair.
The saga `call` and `put` effects are genius. Removing side effects from complex logic flows for testing massively increases confidence in the tests, and simplifies writing the assertions.
Absolutely. Even if sagas aren't around that much anymore, the things you can learn from sagas will simplify your code 10x.
This video should have a million views and I'm only 5 mins into the video. This is by far the best JavaScript based video I've seen in a long, long time.
Thanks a ton for the compliment! Excited to see what you think by then end of the video 🔥
@@JanHesters Excellent, excellent video. I had to watch it a few times. Subbed! Keep up the good work!
@@JanHesters I don't see a section on Monads. I was hoping that was covered. That's the only thing I'd mention.
@@makerKID5 Will be their own video some day! Thanks for the suggestion.
great explanation using a simple example
Duuude, this is such good content. Love the presentation! Quick and straight to the point! Great job!!! Will sub for more
Thank you for the kind words! Anything specific you want to learn?
Love from Pakistan
Love back from Germany! x3
legendary!
More fly than seagulls!
@@JanHesters :D
Awesome video. What I liked about your tutorial is that it is to the point, exact information and enough explanation with related example. No unnecessary abstracted comparison that makes things more complex...
Thank you for the kind words! 🙏 Part two came out today :)
An amazing introduction and explanatory video for Redux, we are waiting the next videos of the series 🥳
Thanks a ton! 🙏 It released today 🔥
Thanks a lot for this tutorial. How much time till the next one?
Out today!
God i hate redux
I can understand. Many people dislike it, which is why it has gotten unpopular. I made this video because many of my company's clients still use it, and because many jobs still require it from my mentees. But no hard feelings ❤️
I would like to see a video of this complete where each thing can be explained in more detail :3
Got it. I'm def planning on dedicated videos for each of these technologies. Thank you for sharing your feedback! 🙏
You are very good at explaining, the content is interesting.
Thank you! 🙏
This really good video. As I know next.js is very difficult to host it in any other platform other than vercel, and vercel is too expensive. and if the app is too big or backend heavy application then in that case also you thing next.js is the best choice as full stack, or only in frontend or react, and a separate backend?
Thank you for your comment! 🙏 There are tons of alternatives like AWS, DigitalOcean, or Railway. When using Remix, I also often work with Fly.io. In my opinion, Next.js can handle full-stack development with its API routes easily. I'd only break out your backend for complex or special needs. Then separating the backend (e.g., using Node.js, Go, Django, or others) can be a better approach.
You are intense. In form and content. And … was that a tank in the forest? Of course that’s a tank, what the heck. 🤨
It's a metaphor for robust code and the `pipe` function haha Thank you for the kind words! 🙏
Accidentally i faced up on the article that describes that video, when i saw the authors name, you went me back 4 years in EarlyNode when i meet you first time ( for a few days ) Jan! You are amazing tutor Jan, you have a lot of good stuff to learn to developers, you have earned a loyal subscriber!!
Thank you for the kind words! 🙏
1) I like the video, subscribed 2) you give vibe that you just dropped new crypto trading course which will make me a millionare in just 3 months 3) 0:33 what is this thing running in background?!???
1.) Thank you! 2.) Never selling trading courses lol But I might make videos on how the blockchain works in the future because it might become more relevant. 3.) Haha some other people in the park during that day.
This video is gold and your energy is unmatched, you earned a loyal subscriber, hoping to get gold contents coming on... 🔥🔥
Thank you for the kind words! More to come 🔥 And just curious, anything specific you'd like to see?
@@JanHesters If you're on to SaaS, you can share how we can research for SaaS, market and scale. Recently I was trying to build a SaaS project but stuck at some point to find the unique solution I was looking for, for example: do stuffs by pdf selection such as highlight, translate, take notes, explanation via ai, and then get them together in a docs.
I am happy to come across this exelent tutorial.Instant subscription of course.
Thank you! 🙏
Instant favorites list channel. You summarized a lot of what I have been pondering as I moved from simple apps that have a couple of pages to working on a complex project with a team.
Thank you for the kind words! 🙏
not to be disrespectful but bro, your head takes up so much space in my screen 😂 😂 Thanks for the content though. Best explanation
Insert big brain meme 😄 Thanks for the compliment!
This is the best JavaScript video I have ever watched and I have almost the best video of most of the well know tutors from udemy, LinkedIn,pluralsite, etc HMMM
That's so kind! Thank you 🙏
I would write swagger/OpenAPI to drive the API design. Makes everyone's life easier with a standard plus you can mock API responses with an API client. Any methodology that doesn't have a strict structure requires upfront time to understand.
Swagger is perfect for API design! 🙏
I was just preparing to design the API for my project and accidentally encountered this video.
Hope it helps! 🔥 Curious, what kind of API will you design? 🤔
This is good general information for pipelines and orchestration, but, you were remise not to touch on the implications of AI. Learn to read the room. You were better off explaining what a markdown file is and how to best build up all the information it needs that an AI can use to maintain concise context. Take my advice with a grain of salt as I'm sure your target audience may already know to convert this information to AI. Edit: thanks for the video
You're welcome! And you're right. RDD is close to A.I. Driven-Development. Buuut, A.I. isn't there, yet. It still needs a human in the loop.
"blink if you're gay" typa video
What? 😄
@JanHesters you're not blinking at all for the whole video for some reason Relax a bit and blink
what is this in fn.apply(this,args) from where this come?
This is just a fancy way to call a function that preserves the "this" context. Here is a more simple way to write it: const result = fn(...args);
Great content thank you for sharing
You're welcome!
Programming Andrew Tate, lol no hate here bro. I just find your approach interesting, something that is not common in this space
Thank you! I wanted to try something new haha! 🙏
I hate Husky, and we don't allow it in our shop. It just creates more friction, and you can do everything Husky does as part of your pipeline when someone sends a PR.
i use webstorm, i see no reason to use husky 😅
@@devyb-cc I've never used WebStorm, so I don't know how they compare, but I HATE the idea of Git pre-commit hooks in general.
@@jamescbender43081 well, jetbrains products all have something like hook. i usually do it only to analyze my code, in case i left some TODOs or unused imports.
Interesting! How do you do it? Do you just run linting and type checks in CI/CD and let people push even with linting or type errors?
@@JanHesters Yeah, we let developers send PRs up with linting errors. Before anyone even reviews it, it will run through the CI/CD pipeline, so linting, and all tests (unit, E2E, etc.) get run automatically and have to pass before the PR can be approved, no matter how many votes it gets. We do this for a few reasons. First, I want all the long-running/resource-intensive steps to run on the server so they can run faster without blocking the developer from working on something else. This also ensures that the branch will integrate with the existing branch. The other big reason, and why we stay away from pre-commit hooks (like Husky) is that I want my developers to be able to commit (locally) frequenty, even if these commits are "work in process" commits, aka "I want to commit what I have so that if the next thing I try to do totally f's things up, I can go back to the last commit." and making them conform to a bunch of rules designed to protect the main branch causes a lot of friction, and discourages these kinds of commits. As log as the "last" commit that's part of the PR conforms to the rules, as enforced by the pipeline, I don't care what the previous commits in that PR do.
Internationalization needs a dedicated tutorial
Will create one! 👍
That was a banger, dude! Keep it up-you’re gonna level up for sure! 🔥
Thanks for the kind words!
This video gave me a headache...
Why? 😄
@@JanHesters My guess is because you’re talking really quickly. I get not wanting to be too slow, but people who like to go through content at a quicker pace (such as myself) can set their playback speed quicker. So your normal pace should be slow enough for people to comfortably understand what you’re talking about. But great video other than that minor nit pick
@@tobydixonsmith6126 Thank you for the feedback! 🙏 I'm experimenting with my deliver style in upcoming videos.
@@JanHesters to be honest it's really fast and loud for me. Btw nice content ❤.
I liked this video, it have explained many javacript concepts, but the code suggested at 30:56 is not working correctly, inspite of addition via add3, its returning NaN, because pipe(...fns) .... is not able to pass all params to add3(), add3 is able to receive on first param only, @Jan Hesters, pls check,
Amazing video ❤
Thank you!
Question, are the terrible shirts a requirement too?
Right into the feels! 💔😄 Wear whatever you want 😉
You gotta love YT algorithm. Spent 3 days setting up a monorepo using turborepo, hell of a pain... Could you create a similar video on setting up for production for a monorepo?
Absolutely! But it will take a few months, I have a bunch of other topics planned first. Thank you for the compliment and the suggestion! 🙏
Well done. Very good video. And thank you for posting the code in GitHub.
This is a rare channel, and I love the atmosphere your in.
Appreciate it! I like shooting outside because we are inside enough as developers haha
very very thanks
You're welcome! 🙏
Functional Programming oof, thanks surely, am subscribing!
Thank you! 🙏
dope style & crazy gold nuggets bro !
I have the privilege of working with the best when it comes to style 😉 Thanks!
wow ..Best explanation ..
Thanks so much!
Just one question: where you in the movie Split by M. Night Shyamalan?
A few of me were, yes 😉
In your curry function you copy memory four times just for the sake of immutability, which is already guaranteed by just doing 1 + 1. You'll have awful performance and you're using it for a simple addition? At least use a good example. I also really do not agree that this code is any more or less testable than OOP code. The problem is always state and keeping it correct at all times. That is usually not due to any one function being incorrect, it is due to developers making simple logic mistakes. Most bugs I've found in production are impossible to find with unit testing, because that's not where the bug is. Most of all, I just think JavaScript is a candidate for FP due to performance reasons. You don't really have to do much in order to get JavaScript to absolutely chug and lock down the browser, and on the server there's just so many more performant options. Even Java is more performant, then there's Kotlin even in the JVM world which tends to be more performant. C#, C++, Rust, Go, all of them are more performant. That's for the languages not even specifically for FP.
Absolutely agree. I said at the end of the video that the examples in this video are contrived and optimized to be understandable. I disagree that OOP coder is easier to test because by default class inheritance is the tightest form of coupling and frequently requires mocking. But if you have good examples for OOP code that is easier to test than pure functions, please kindly point me to it 🙏 And regarding performance, IMO you should favour readability over performance UNTIL performance becomes a bottleneck. I can't speak to those other languages you mentioned because I'm specialized in JavaScript.
@@JanHesters Easily testable OOP code honestly follows the same guidelines. Given the same input, you should get the same output. The thing that tends to get people thrown off is that with OOP and stateful classes, you'll have adjusted one of the inputs if you run the same method twice. In order to replicate the same thing you also need to replicate the class instance. Just with a really basic class (pure garbage I'd never write normally, so sorry about it being a bad example): class Addition { value; constructor(initial) { this.value = initial; } execute(value) { this.value += value; return this; } } assert(new Addition(2).execute(2).value, 4) would be 4, every single time you run it; same as FP. If you chain it like new Addition(2).execute(2).execute(2).value then you've fundamentally changed what it does, just like FP. Same principle, different execution. The class example is extremely stupid though, wouldn't write code like that normally, state is best stored in DB regardless. One of the benefits to using classes in JavaScript is that while it looks as if the objects all have their own methods, they are all only allocated once, which is a major benefit to anonymous functions added to objects which need to be allocated every time. This is not as important now with imports and exports being a thing, but look into how stupidly much memory is used in a regular application due to all of the object nonsense JavaScript injects since it needs to treat everything like a nondescript object. That's not the case in Java or C# for example, where they only keep the bare minimum to identify the class. As for why I think a lot about performance, it's because I work with larger datasets frequently, so I have to walk the tightropes of readability and performance a lot. This is true for both backend and frontend things; where updating/inserting 50k DOM elements is hell and takes ages even in a best case scenario, whereas remaking the entire HTML structure as a string and replacing all of it takes a few seconds. However, it only takes a few seconds under the assumption that I reuse memory through not allocating anything extra. This means reusing variables and pre-allocating memory as much as possible. I do enjoy FP though, I reach for it whenever possible, but only when I can afford doing so. I never do anything particularly crazy with it either, but the idea of passing functions to other functions is something I use regardless of FP or OOP. Command pattern is just that. The Addition class I gave as an example would be one of the classes one would pass to something that processes it. Somewhat unreadable, but with enough complexity in the business logic, it's totally worth it. Sorry about the long reply, not sure if you're going to read it either, but I hope my sleep-deprived brain didn't spew out too much nonsense.
@@CottidaeSEA Thanks for the long reply! I for sure read it 🙏 Got it. As you said, the code you gave as an example is different from how you'd write it, but let me still address it because it demonstrates one of the problems I had with testing (and reading / understanding classes) as opposed to FP - even in production codebases with "real" code examples: You need to set up the internal state to run the different functions, and it's hard to understand a method in isolation. For example, if you had another method on that class, that would only do something if `value` was three, you'd need to either call `execute` three times, complicating the test. Or you'd need to manipulate the class directly, which then would obfuscate the test so it resembles the real usage less. With FP and pure functions, they usually map one input to an output, making it trivial to write tests for them and truly test them in isolation. And thank you for clarifying where you come from. Totally makes sense that you think about performance so much! 👍 I've been a fullstack dev for most of my career and over time I learned the best approach to browser performance is "fix it if it breaks, otherwise favor good DX (testability, readibility etc.)". (Most) Browsers are so fast nowadays that it doesn't matter if you take up extra memory. > I reach for it whenever possible, but only when I can afford doing so This pretty much sums it up! 😊 And in my experience, in most JS server and browser codebases, you don't need to optimize for performance so granularly. (Especially on the backend, if performance mattered, the teams switched to Rust or another fast language haha) Thanks again for your thoughtful reply!
0:13 Nope! Using the splat operator = automatic fail. Simply put, you don't understand how expensive that operator is and that it should only ever be used very sparingly. Go write a DSL from scratch in a real programming language and implement the splat operator as part of it to learn how wrong your first 15 seconds of this video is. Splat may be convenient but trash like that it is why my web browser is chugging 10GB RAM half of the time. The rest of your example is what I call "symbol soup." It's unreadable because it uses symbols instead of words. Good coding practices balance words and symbols in a pleasing, easy to read/understand experience.
The examples in this video are NOT meant to be production code, but just to teach the concepts of FP. (I mention it at the end of the video.) But your comment is good advice, I hope more people read it!
I remember struggling with memoization 2 years ago doing related task on my first job. I wish I had this video back then. S-tier content. You deserve more subsribers bro
Thank you for the kind words! 🙏 That's exactly the target audience. So far, this video received less views than my other ones, but I hope people who really need to find it, find it through SEO :)
Insane thumbnail
Thank you!🙏
Exposing all the "magic" under the hood. This was very helpful in understanding memoization. Great video!
Thank you and you're welcome! What topic would you like to see covered next?