Investigate how to improve dependency injection in components

[acelaya]

Some years ago, dependency injection was introduced in the project, via dependency injection container.

The approach works pretty well for services, but it is a bit less convenient for components, specially considering dependency injection is frequently used for redux action creators as well.

These are some of the problems:

• Components that need non-redux dependencies injected, need to be wrapped in a constructor function.
• Dependencies can be injected via that function, or via props, if they are action creators or redux state props, making it inconsistent.
• Once a component needs any kind of injected dependency, it can no longer be imported. Instead, it has to also be injected itself, affecting the whole chain of parent components.

A possible way to solve this would be to create a provider that allows accessing the container via context, and do a sort of dependency location to pass any kind of dependency to components, always via props.

Then we could have a helper function to wrap components that takes care of extracting some services and passing them down to the component.

This has the next benefits:

• We can always import components, no matter what, allowing to refractor individual components adding/removing injected dependencies, without impacting the parents in the chain.
• Dependencies would be consistently injected via props.

Possible approaches:

TODO