![]() Scripts/store/index.js (☓ bad) import īear in mind that this is a simple component other components might have more complex logic and things to take care of. There was no way to control when a component or a helper function called the store for the first time. But since the store wasn’t explicitly created, but only as a side effect in its own module, components ended up using the store before it has been created. The application entry point was initializing all the components, which then made internal use of the store directly or via helper functions (called connect here). I’ve put together a diagram to demonstrate the dependency flow I was dealing with: The issue was that the store didn’t get properly initialized when a component tried to access it. ![]() I ended up regretting this and dealing with circular dependencies real quick. I don’t know why I thought this would be a good idea, but I put the store in its own module ( scripts/store/index.js), which could then be imported by other parts of my application. But how could I make it accessible to all of my components when rolling my own solution? Most frameworks work with some sort of dependency injection container, so we as a user of the framework don’t have to come up with our own solution. To access the store, it needs to be created once and passed down to all instances of an application. The structure is similar to scripts/, so as to maintain a consistent architecture throughout my code base. My markup is separated into another directory and is ultimately rendered by a single index.html file. There are many variations on this theme, and most projects do things a little differently, but the overall structure is the same. It’s a logical structure and is applicable to many different setups. I decided to adopt a file structure commonly found in Redux and React projects. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |