In previous posts I mentioned that I'm working on react apps at work and I can relate on how I structure the code. This is just a way to do it, there are many others, especially since redux released redux toolkit but it helped me maintain clean code.
The src directory is structured like this :
src/ actions/ <+ Redux actions api/ components/ <+ React components constants/ <+ Redux actions constants img/ less/ helpers/ filters.ts functions.ts selectors.ts sorters.ts localization/ models/ reducers/ <+ Redux reducers sagas/ <+ Redux sagas if applicable store/ types/ <+ Typescript types server/ <+ in case of SSR
At the beginning of the app I put the redux connected containers in a containers/ directory at the root level of src/. Because it is hard to maintain, I finally decided to put the containers in the components files. It's easier this way to connect more data to the components without finding the matching container file.
The saga directory contains the logic code: redux saga
The filters.ts file contains all the filters functions to filter the data of the store before displaying.
The functions.ts file contains the helpers functions like defining all the runtime contexts of the app
The selector.ts file contains the selector functions for the store, to target specific data in the store in sagas.
The sorters.ts file contains the sorters functions to sort the data before display.
Although you cannot be lazy when working with React and Redux, structuring the code this way can help you get organized and help you grow it easily and safely. As I said at the beginning, js ecosystem moves fast and many libraries have been game changer, it's up to you to structure your code the way you want.