So we decided to redo UI of our web application in React. Six months down the lane and we have a complete mess of components and reducers and thunks and actions and god knows what not.
We have multiple files named reducer.ts and each file is 3000-5000 lines long with thousands of reducer functions in each.
Same is the case with actions.ts files and then accessor.ts files. Interestingly, thunk.ts files are god files with lines approaching to millions (exaggerating, but you got the idea).
Then there is a few thousand lines long api.ts file that handles every possible call to the api server.
At the root level, we have a types.ts file that carries more than 30,000 lines in a single file with every typescript type defined in it.
I have been with small scale React apps for few years now but never had any exposure to this level of project size and messy code.
I am sure you guessed already that there are no Unit tests at all.
Primary problem is that the very promise that React provides of independent components that can be refactored and managed individually seems completely broken in this scenario.
Obviously there is no problem with react itself but I guess the way it has been used in our case is way off the mark. It takes hours to even locate the code for a very simple bug because everything is so deeply interconnected, and every functionality is scattered among at least six to ten files, it is often unclear where some change is happening.
My questions to the veteran react devs are as below:
Will it be a cardinal sin if I remove the redux and thunk and types and accessors and move the logic of each component inside that component? This way we won't have to jump six to ten files to search for the code of a single action.
Even if we have to keep the store, and reducers and accessors and api.ts, is it a religious practice to keep everything in the same files and make them god files? Can I at least create separate reducer or accessor or API-call or thunk files for each action/feature I am handling?
Is there any recommended practice for code organization when building large scale React apps?
I am from a strong unit testing background and I believe it is imperative to have clean, well separated and testable code for better maintenance.
Am I thinking in the wrong direction because in React world the way project is already done is the right way to do things?
Thanks for any clues.