Mvc manage context and reusable components

Question

I'm trying to create for a Web App an MVC Architecture with a Hierarchical Router. The goal is manage all the business logic and views with a clear pattern.

Let me do some example:

1. Route index called
2. Index controller called; it has the responsibility to insert the view into the page.

Now the problems are:

1. How can I manage the required instance of model and collection or services? Where they must be stored? If I store they in the controller, how can they be accessible from external resources?

2. How can I manage all the UI Components that have not a dedicated route (like a login overlay callble everywhere) with their business logic and required objects instances?

I'm using React with Flux pattern. One solution i've found is to create the Controller without map them directly to the routes. This way let we use Controllers both into Routes handlers and from another Controller. In this case, how can we have the Controllers accessible from anywhere?

I know it depends on usage cases, but I'm trying to found a best practice ino order to have a clearly managing pattern.

Thanks in advance!

Answer 1

This is a pretty open-ended question, but I'll try to answer it.

1. The way to manage dependencies in React is by passing them as props. By passing them as props or passing the data they manage as props, the receiving component won't have to know where they come from. And you push that type of decision making as far up the hierarchy as possible. That way you end up with all of that wiring centralized in one place, which is nice. If you're using react-router, you'd set a routes handler component to a component which just fetches dependencies, and renders another component passing in the needed dependencies.

2. The most obvious way is to pass the dependencies that the login component needs to the component that renders the login component. It has the benefit of being clear and specific, but the drawback is that you need to pass those dependencies all over the place, and it's easy to miss some. There's something in React called context which lets a tree of components share a context without having to pass it around. You can find more info here: https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html. Another option is of course to couple the login component with the services it needs, by just importing it directly. The benefit is that it's easier to understand and the drawback is that you're coupling the component with its dependencies.