Tutorial 1: React Native Redux Boilerplate

Published in

Mesan Digital

3 min readJun 18, 2017

UPDATE: An updated version of this tutorial using React Hooks is NOW available HERE

Update March 5 2018: Switched to CRNA (Create React Native App)

Boilerplate for a React Native iOS and Android app using Redux.
The steps below are a compilation of a series of tutorials.

View project on Bitbucket

Getting Started

If this is your first time creating a React Native app, make sure you have Node, npm or yarn installed. For this project, I will be using npm and create-react-native-app which has been dubbed as the easiest way to start building a new React Native app.

There are many advantages to using CRNA, one being that it allows you to start a project without installing or configuring any tools to build native code — no Xcode or Android Studio installation required and you can install the Expo app on your iOS or Android phone for testing.

Before we begin, we have to globally install the create-react-native-app command line utility using npm or yarn.

Open up your terminal and run one of the commands below depending on whether you are using npm or yarn.

$ npm install -g create-react-native-app
  # or
$ yarn global add create-react-native-app

Step 1: Create React Native Project

Open terminal and run

$ create-react-native-app redux-boilerplate
$ cd redux-boilerplate

Step 2: Install Dependencies

In your project root, run

dependencies

Step 3: Create Folder Structure (*)

In your project root create an app folder. In the app folder create an actions folder , a reducers folder, a components folder and instructions.json.

Step 4: Create Sample Data (*)

Update instructions.json.

app/instructions.json

Step 5: Create Your First Action (*)

The action is a basic function called from the component whenever we want the whole state of the app to be changed. Our action creator is a simple function returning an object (the action itself) with a type attribute expressing what happened with the app.

In your actions folder create index.js

Step 6: Create Your First Reducer

Reducers are the ones in charge of updating the state of the app. Redux will automatically pass the current state of the app and the action occurred.
It’s up to the reducer to determine if it needs to modify the state or not based on the action.type.

In your reducers folder create index.js

Step 7: Create Your Component

In your components folder create a home.js

Step 8: Create Your Store

In the app folder, create a store.js

Step 9: Link It All Together (*)

Redux needs to inject a store holding the app state into the app.
To do so, it requires a ‘Provider’ wrapping the whole app.

Update App.js file.

Step 10: Test

Run the command below to test the app, This will start a development server for you, and print a QR code in your terminal. If you are using the Expo app, you can scan the QR code.

$ npm start