Software developer

Developer of webapps and more since 2016

09 Apr 2020

379
React/Redux app structure

Tags

Introduction

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.

Directories structure

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.

Conclusion

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.