Clean architecture in Frontend (React/Redux/Typescript)

Try a new approach to structure a new frontend project

Separate project by layers helps me test my code easier

The layers in clean architecture

• Infrastructure: Rest/GraphQL/LocalStorage/State (Redux/Recoil/Mobx/VeuX), etc..
• Services: call requests to third parties/server side,..
• Entities: the core logic of business domain (does not depend to layers)
• Use Cases: A data flow — For example, when signing up a user, the use case will call UserService to check the existence of the user before creating.
• Adapters: Implement specific logic that helps the UI to interact with the infrastructure. For example: We use Redux as State Management in infrastructure, so we need implement an adapter for the Redux — we put the reducers/saga here.

The flow should look like this one (Sorry bad drawing here lol!)

The most important things in this architecture is dependency rule — The lower layer must not know about the higher layer. Then we can keep it testable. Use interface to define the methods as a communication.

For example

The UserService just needs to know the interface of HttpClient — don’t need to know the implementation of its

We will create a DI container to wrap up all information

Now the StoreProvider component will resolve the store from this (Provider from react-redux as adapter)

Think this as an adapter — we can replace it easily with another store.

An indie dev/trader

This is my first post. So it will have lots of missing stuff and bad expression. I will try to improve in the future. Hope it will help you get the idea at least.

Repository: https://github.com/namKolo/ronin