App Architecture and Folder setup for React Native App Development

The guidelines in this topic are created by using the online tutorials and my expertise in mobility.

Most of the React Native app is based on the Flux Architecture pattern with Redux-Thunk and Redux-Saga to work as middleware that lets you call action creators that return a function instead of an action object.

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments. this means the entire data flow of the app is handled within a single container while persisting previous state.

Redux can be broken down into a few sections while building the application which is listed below.

Actions: “Are payloads of information that send data from your application to your store. They are the only source of information for the store.” this means if any state change is necessary the change required will be dispatched through the actions.

Reducers: “Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of reducers.” when an action is dispatched for state change its the reducers duty to make the necessary changes to the state and return the new state of the application.

Store: With help of reducers a store can be created that holds the entire state of the application it is recommended to use a single store for the entire application than having multiple stores which will violate the use of redux which only has a single store.

Components: This is where the UI of the application is kept.

Folder Structure

Although we use a Redux pattern by using Flux architecture style in app development for folder structure, we can still use an MVC Architecture Style to segregate the different layers of the app for decoupled design mentioned below,

• Presentation Layer: Responsible for user interaction consisting of all the components and screens.
• Business Layer: Responsible for business logic. We can create a separate manager class for the same.
• Data Layer: Responsible for Local Database communication. We can create a separate manager class for the same.
• Service Layer: Responsible for consuming a web service. Data coming from the server as JSON/XML pass to the business layer or data layer.
• Locals: To provide a multilingual feature in-app.
• Utils: To provide a Utility class and method.
• Resources: To provide images, fonts, style guides.
• Redux: It consists of actions and reducers.
• Helper: To provide helper class.
• Configs: Responsible to handle all the configuration statements and setting cmd.

References: Some references were taken from stack overflow and other blogs.