DEV Community

Discussion on: Dependency Injection /Services pattern for React (inspired by Angular)

Collapse
larsejaas profile image
Lars Ejaas

I am trying to wrap my head around this idea and understand if/why this is a great idea. I follow you as far as using a hook for the fetch logic. I always prefer moving the logic for something like this into a custom hook. However, what is the added benefit of using context when you can access the service from the hook? To cache data??? 🤔

Collapse
dansolhan profile image
Daniel Sollie Hansen Author

Thank you for the comment! :)

The way I see it, the benefit comes when you're testing. When you need to test a component that relies on the service, you include a context provider when you render for the test. You can then set the value for that provider to be a mock implementation of that service.

Does that make sense?

Collapse
larsejaas profile image
Lars Ejaas

Ahh, yeah! That makes sense! I still have a lot to learn when it comes to testing, so I really wasn't thinking about that.

Thread Thread
dansolhan profile image
Daniel Sollie Hansen Author

Glad that clears it up! :)

I know Jest comes with a set of functions to be able to mock components, and I'm not veery used to using them. I find this particular solution makes it easier to mock components on the fly, while also enabling abstracting away concerns. It's entirely possible that there are more elegant built-in ways that I just haven't explored yet :)

Thread Thread
dansolhan profile image
Daniel Sollie Hansen Author

If you think it might be useful, I can see about making a tutorial for how to think when writing tests in this manner!

Thread Thread
larsejaas profile image
Lars Ejaas

Well, I do not see your solution as a bad implementation at all, I just feel you sometimes tend to get a bit of "context-provider-hell" working with things like styled components and Apollo-client etc. I just wich this could be done in a cleaner way in React.

Thread Thread
dansolhan profile image
Daniel Sollie Hansen Author

I'll admit that I just very shortly touched into StyledComponents... I did not like it at all :P.

Jack seems to have built a possibly viable solution for a full-fledged DI-system. It's probably more refined than mine!

Thread Thread
larsejaas profile image
Lars Ejaas

LoL 😂 Styled components is a bit of a love/hate relationship I guess. But it can be really powerful when you want to do things with styling that are a bit out of the ordinary. I used it yestoday to create a cool "unwrap" effect animating some nested nav-menus where I the height of elements that would change depending on what is placed in the menu: Stuff you just can't do with "traditional" ways of styling. I bookmarked Jacks Solution - looks like something that might come in handy!