Typescript for React and MobX From Beginners to Masters
HTML-код
- Опубликовано: 2 мар 2021
- Continuing on with Typescript we are starting a series on React state management where we take the same To-Do list and implement it using a bunch of different state managers. This time we are looking at MobX!
MobX: mobx.js.org/
Starting code: github.com/jherr/todo-base
Finished code: github.com/jherr/todos-many-w...
If you liked this video, buy me a coffee! www.buymeacoffee.com/bluecoll...
Hope you folks enjoy this!
👉 If you enjoy this video, please like it and share it.
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Weekly free newsletter: www.jackherrington.com/subscr...
👉 Discord server signup: / discord
💢 Watch our other videos:
💟 Hacking your Github contribution graph: • Hacking Your Github Co...
💟 Build a KK Slider Slider: • Build A K K Slider Sli...
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
Subscription Link: bit.ly/2E7drfJ
#reactjs #typescript #mobx 
Наука
I haven't looked into MobX because I haven't had a need for it and haven't had any request for it in projects. Still good to know, so thanks for giving me a quick look.
Hey hey! Thanks for the pin Jack. I was just giving you accolades in Jesse's (codeSTACKr's Discord) for the weekly news inclusion. Love your content and watching you grow. Growing with you my friend. 🙂
You deserve bigger audience with such a content! Thank you a lot for great introduction to MobX!
exactly
This is awesome, thanks Jack. I love that you did some Fetch requests as well! :)
Very well explained, thank you! I like the way you go straight to the point and the use of pure functions. You have +1 subscriber.
OMG you're a great teacher. You helpt me learn MobX in under 15mins while Redux and Redux toolkits took me at least 2 days to go through all the practical implementation. That is really productive.
Thankssss Jack, your videos are really helpful! I hope you continue to make more!
big thank you for the video. i can now efficiently use it in my projects
This is such a quality tutorial, great job!
Just what I needed! Thanks!
Hi Jack, thanks for your videos, they are much helpful and superb! Hope you will continue to make so useful stuff
i was struggling with mobx to handle a small app as I am more inclined towards doing all with redux! but had to had it in this small all! so MOBX and your tuts helped! thanks
I was a little bit scaried about using Mobx but you explained so easy that I want to implement it. Thanks
Nothing to be scared about, MobX is good stuff.
Amazing content, thank you!
This is top notch high quality channel
Thank you! I've spent a long time on this. Easy as soon as it works :-)
Aint that always the way? 😀
That SATURN V is gorgeous!
thank you so much for great video. i could understand so easily 👍
Great video!
thx Jack , i'm working React developer , and i 'm beginner in TS and MobX, offcourse your code's strange for me, but i repeated my-self and it's greate. Good Luck and be healthy !
Hi Jack I have some suggestion:
1. In your case you can omit the returning type of functions like in addTodo, because TypeScript is able to infer the type.
2. Maybe would be nice to show that, we can create for example:
type AddTodo = (todos: Todo[], text: string) => Todo[];
and use it in this way:
const addTodo: AddTodo = (todos, text) => [ ....
But of course very nice video and thumb up :)
Thanks a lot for the video
Great video Jack, as per usual!
Could we get access to that performance test you mention in the video? Thanks!
This is cool
Hi Jack, thank you so much for your videos. I love MobX too and MST, but in this example your are modifying directly some observables, meanwhile in the MobX documentation it's highly adviced to modify the observables properties using an action, what's your opinion about that?
Regards...
In larger applications you definitely should use actions to mutate the state instead of directly mutating it.
Very helpful video!
What are you using to change the way arrows and inequalities in your code are displayed?... I assume it's some VSCode plugin
Enable ligatures with the a font that supports ligatures.
Hey Jack, thanks for all your videos! What is your personal favorite when it comes to state management in a rather large project? The amount of state management tools is crazy and makes it difficult to choose the right one for your needs since they are all pretty similar but still offer different nifty solutions. Would you say at the end of the day it is personal preference and what would you personally recommend?
PS: My current go-to solution is using React's Context API with actions and reducers so it looks pretty similar to the Redux boilerplate code but doesn’t really bloat the project since it is a built-in solution. Works great on smaller projects but the amount of rerenderings would probably slow down the application as it grows so I'm looking for an alternative for bigger projects. And since most of the backends I currently build and interact with are Apollo/GraphQL/Lambda based, using Apollo Client as a state manager (with its cache) would also be a good solution for bigger projects no?
Thanks in advance 🙌
I personally haven't tried using just Apollo for state management. I realize that there is an overlap there between Apollo and global state management, but I always found I needed some number of globals (e.g. user ID, auth state, etc.)
I'd probably go with Zustand for large projects. It's very lightweight. It has solid Typescript support. And you can't just directly set values on the store, which is great for small projects but a little less awesome in larger team projects.
@@jherr Awesome, this was exactly what I was thinking about as well. Thank you for answering! Looking forward to your upcoming videos and happy coding :)
Hi Jack,
Can you please make detail video on mobx.
Hi Jack, great videos! Heads up, it looks like your Discord server invite link is invalid.
Yep. Looks like it times out? I need to write a script to update all the video descriptions. 😂
Been using Mobx lately and loving it. Any clues on persisting data without the use of decorator?
No, but as I recall they always have decorator-less alternative. So if you can't find it in the docs I'm sure you can ask in a support channel.
@@jherr Thanks Jack. Awesome contents, btw. Cheers.
For things like newTodo should use local state like useState rather than store, even in mobX.
I prefer using MobX store actions as it enforces cleaner flow.
And what I mean by that - if for example you have multiple consumers of the same store and variables actions allow for easier debugging to see where did the change for the store came from.
I should have added a section on actions, they are definitely a good way to ensure the integrity of the store.
Could you please make videos on design patterns with examples? :)
Yep, that's what I've been doing a lot of lately: ruclips.net/video/SZ2kAkMdAZE/видео.html
@@jherr Oh great!!! thanks! also videos on Algorithms can be very helpful, I would pay for your courses Sir! I will at least get all my friends subbed to you channel! Cheers
💙🙏
what playlist is this video belong to?
Are there any videos for testing react components with MobX -- you alluded in the video that it would be more difficult because you need to wrap the components, but unsure how to approach that. @JackHerrington
What is that funky theme you like so much?? :)
Apollo Midnight with some tweaks to make it Italic.
@@jherr Thanks, and just so you know--the vids on TS/React => very helpful as a distillation of the cheatsheets and more.
@@adicide9070 Thanks!
MobX seems pretty straightforward, but i think zustand simplify my life.
Agree Mobx is a terrible name of a observer library. I guess the "ob" is for observer but still
Hi! I'm trying to learn MobX. With it, why would need React's context hook when I can just import my MobX container freely throughout the app?
I don't think you need to use context if you are using MobX.
@@jherr Thanks Jack!
20201 and class?
nah.. just too easy, don't like it ahhahahaha
question though: what about rendering performance? does it cause unnecessary re-rendering?
nope... only re-renders if the mobx properties used in the components change.
Why do you throw MobX class methods outward ?
I'm not sure what that means. Could you clarify that a little?
@@jherr when you realised TodoStore you code functions with enter values, why you didn't use class methods ?
@@user-be7jw6nl1p Can you point to a particular time in the video where I do this?
Why independent functions instead class Methods ?
@@user-be7jw6nl1p Oh, I see, no particular reason. Feel free to drop to those in the class. Honestly, this video is part of a series of videos I've done across a variety of state managers. So if you are familiar with that series I use those same functions across all of them, and so it would let folks know that the implementation of addTodo isn't changing between any of them. They all do addTodo and removeTodo the same way. But you are correct, the "correct" implementation here would be to put that logic into the class.
I liked better Zustand =)