React Native Folder Structure — For Simplicity (Part 2)

This is the next update of my last article about react native structure folder part 1

simple react native structure folder

If you haven’t read my last article of simple react native structure folder, i suggest you to read it first for better understanding, because this article is the next update of my last article, i change some folder structure to be simpler and easier to understand.

In my existing structure folder, i have src folder that contains folder actions, components, config, constants, pages, reducers, routes and utility(a description of each folder is in the last article).

existing structure folder

In my new structure folder, i change a little bit in folder actions to be simpler. So, there no folder constants and reducers in src folder, but it is moved to folder actions.

new structure folder

Why do i move them to folder actions? because the constants and reducers is related to actions folder. Its function is same to call API and it will be simpler if we move into the same folder.

actions folder

In actions folder, we have folder:
1. api = it is a folder to store all functions to call api or set Asyncstorage.
2. reducers = it is a folder to store initial state of reducers, like “Fetch”, “Receive” and “Error”.
3. redux = it is a folder to store all redux state from API.
4. rest = it is a folder to store all API url.

1. API
In API folder, there is index.js file that has function to import all the api actions and export them as an object. For example, we have 5 API functions, there are general, harian, history, observation and screening. Firstly, we create the file called general.js and code it as its function to GET/POST/UPDATE/DELETE. For example, function to getAbsen. Then, export its file.

general.js

Then, in index.js file, we import them. Create const variable to store them as object and export them, so that it can be called from outside this folder.

import all api file and export as object

2. Reducers
In Reducers folder, i made significant changes that will be useful for the initial state that can be used in all redux state. It no longer uses switch-case logic, change it to the dynamic state by reading ‘FETCH’ and ‘RECEIVE’. That’s why i used ‘action.type.includes’ function to read all actions state.

index.js in reducers folder

3. Redux
In Redux folder, it is to store all action types. Actually, it is same like constants folder in the last article. But i split the redux state and rest API url into 2 separate folders. The goal is to facilitate maintenance and faster coding.

index.js in redux folder

4. Rest
In Rest folder is also same as the constants folder in the last article that stores all API url.

index.js in rest folder

So, that’s the new structure folder of my version. It is the solution of cons in my last article. I hope it’s useful for all react native developer and you who are still newbie for react native. I already implemented this structure folder in 2 projects, it runs well, easy for tracking issue/bugs and easy to understand for your team. All your suggestions will be really helpful for me, drop in comment section below! Thank you!
#StaySafe
#StayAtHome

Introduction · React Native

Quick Start · React Redux

React Native Folder Structure — For Simplicity (Part 1)