Moses Esan
Aug 19 · 4 min read

As I stated in Part 1 of this series, when it comes to organizing my React Native projects, I always organize by feature/module.

Two of the main reasons I organize my projects this way are:

  1. Makes my project clean and easy to navigate
  2. Makes modules reusable, for example, I reuse my Authentication module in several projects, I do this by simply copying the “auth” module folder from one project and pasting it into the modules folder in my new project.

Because each module folder contains the reducer, components, scenes and configuration files relating to that module, I can easily copy and paste it into my modules folder and all that will be left is:

  1. Adding its scenes to the routes stack in the app’s index.js file
  2. Adding its reducer to the rootReducer.js file

The steps involved in creating a module are as follow:

  1. Setup (Create Module Files and Folders)
  2. Declare Constants
  3. Create API
  4. Create Reducer
  5. Create Components and Scenes (with Action Creators)
  6. Update Routes

Step 1: Setup

To create a new module, run the command below, substituting [MODULE_NAME] for your module’s name.

Once done, immediately move into the module’s directory. Next, create 2 folders, components, and scenes and 4 javascript files, index.js, constants.js, action.js and reducer.js.

Components — This folder will contain components used used by this module.

Scenes — This folder will contain the app’s various scenes.

Make sure you are in the project root$ cd app/modules
$ mkdir [MODULE_NAME] && cd [MODULE_NAME]
Folders
$ mkdir components scenes
JS files
$ touch index.js constants.js api.js reducer.js

Step 2: Declare Constants

In the constants file, declare the modules name, redux action types, API url and its endpoints.

app/modules/module_name/constants.js

Step 3: Create API

In the api.js, the functions that will interact with the backend api are created. The constants file is imported, giving access to the previously declared constant variables.

I have added a sample function for retrieving data, this function returns a Promise object.

Promises are used to handle asynchronous operations in JavaScript. — Promises

The callback function makes an API request to retrieve the data, if successful, the promise is resolved with the data. If an error occurs, the promise is rejected with the error object.

app/modules/module_name/api.js

Step 3: Create Reducer

The reducers are in charge of updating the state of the app based on the actions passed to the store. - Redux Reducers

The reducer file will handle the “DATA_AVAILABLE” action by extracting the data object from the action object passed and then extracting the users object passed to it.

For better understanding, here’s a sample of the action object passed to the reducer.

{
"type": c.DATA_AVAILABLE,
"data": {
users: [ This is data to be extracted
{
"id": 4,
"email": "eve.holt@reqres.in",
"first_name": "Eve",
"last_name": "Holt",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
}, ...
]

}
}
app/modules/module_name/reducer.js

Root Reducer
Add the module reducer to the rootReducer.js file.

app/redux/rootReducer.js

Step 4: Create Components and Scenes

Components

Make sure you are in the project root$ cd app/modules/module_name/components
$ touch Shared.js
app/modules/module_name/components/Shared.js

Scenes

Make sure you are in the project root$ cd app/modules/module_name/scenes
$ touch Home.js

The Home scene calls the api getData function to retrieve the data, if successful, a redux action is created with the type DATA_AVAILABLE and dispatched to the reducer.

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. — Redux Actions

//New Action
{type: c.DATA_AVAILABLE, data:{users}}
//New Action Dispatched
dispatch({type: c.DATA_AVAILABLE, data:{users}})

Redux useSelector function is used to access the data in the redux store.

//Access Redux Store State
const homeReducer = useSelector((state) => state.homeReducer);
const { data } = homeReducer;
*homeReducer is the name given to your reducer in the rootReducer.js file. [module_nameReducer]
app/modules/module_name/scenes/Home.js

Module Index
The module index file is the entry point into the module, the module’s routes stack is created using React Navigation createStackNavigator function.

createStackNavigator: Provides a way for your app to transition between screens where each new screen is placed on top of a stack. — React Navigation

app/modules/module_name/index.js

Step 5: Update Apps Routes Stack

With the scene ready, the modules routes stack is added to the apps main routes stack. Update the index file in the app folder with the code below.

Entry Point
If this is your first module then you will need to update the App.js file. With a reducer now available, it’s time to wrap the app’s Router with the Redux Provider.

App.js

Run the command below to test the app.

$ expo start

In Part 3, an Authentication module will be added.

That’s all folks!

Related Tutorials

  1. How to Build a React Native App Using React Hooks and Redux — Getting Started Boilerplate
  2. How to Build a React Native App Using React Hooks and Redux — Authentication Module
  3. Tutorial 1: React Native Redux Boilerplate
  4. Tutorial 2: React Native Redux with CRUD operations

Other Tutorials

  1. Tutorial 4: How to Build a Laravel 5.4 JWT-Powered Mobile App Authentication API
  2. Tutorial 5: How to Build a Laravel 5.4 JWT Authentication API with E-Mail Verification
  3. Tutorial 6 & 7: How to Build a Laravel 5.4 Administration Module with Role-based permissions using Entrust package

Mesan Digital

Sharing tutorials on the development of React Native and PHP projects.

Moses Esan

Written by

Full Stack Developer

Mesan Digital

Sharing tutorials on the development of React Native and PHP projects.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade