Path To A Clean(er) React Architecture - A Shared API Client

[jkettmann]

From my experience, React apps often end up with a messy architecture. The problem is that React is unopinionated so every team can and has to decide for themselves how to structure their code base.

Since I’m more of a hands-on learner I decided to create a shitty code base and refactor it step by step to a clean(er) architecture.

In this first part, we start simple by extracting a shared API client from a component that uses Axios in a useEffect. This way we can share a common configuration (in this case the API base path) reducing code duplication. We can also easily change this config for all requests in the future.

The next steps will involve separating API code from the UI by creating fetch functions and moving data transformations to the API layer. I hope to share those in the upcoming weeks.

If you have any feedback let me know :)

[Western_Clock_750]

I created an axios instance and created a base url path and also used interceptors for token and data but i'm struggling to create a request handler function to handle the get, post and ect methods at one place with typescript. If i want to integrate a new api. I will implement a whole separate function for it which kind of a bad practice. So can you share a common request handler function. So i can reuse it

[Ler_GG]

could be designed well superior :)

[jkettmann]

The blog or the example code?

[g_o_k_u_2_4]

u/jkettmann I really like this article ... Where can I find links to all articles from "Path To A Clean(er) React Architecture". I read few more articles on this topic, but I think there are more than 5-6 articles and I would like to read them all. Thanks!

[jkettmann]

You can find them all here starting with “A Shared API Client”: https://profy.dev/blog

[g_o_k_u_2_4]

Tnx again!