MosesEsan / mesan-react-native-redux-boilerplate-2017

Boilerplate for a React Native iOS and Android app using Redux

React Native Redux Boilerplate

Boilerplate for a React Native iOS and Android app using Redux

Demo
View Demo

Related Repo
React Native Redux with CRUD operations

Tutorial

• Step 1: Create React Native Project
• Step 2: Install Dependencies
• Step 3: Create Folder Structure
• Step 4: Create Your First Action
• Step 5: Create Your First Reducer
• Step 6: Create Your Component
• Step 7: Create Your Store
• Step 8: Link It All Together
• Step 9: Update Your Main Files

Step 1: Create React Native Project

Open terminal and run

react-native init ProjectName

Step 2: Install Dependencies

In your project root, run

npm install --save react-redux
npm install --save redux
npm install --save redux-thunk

Step 3: Create Folder Structure

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

Step 4: 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 a js file index.js

export const DATA_AVAILABLE = 'DATA_AVAILABLE';

import Data from '../../instructions.json';

export function getData(){
    return (dispatch) => {

        //Make API Call
        //For this example, I will be retrieving data from a json file
        //Get the sample data in the json file
        //delay the retrieval [Sample reasons only]
        setTimeout(() => {
            var data  = Data.instructions;
            dispatch({type: DATA_AVAILABLE, data:data});
        }, 2000);

    };
}

Step 5: 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 realize if it needs to modify the state or not based on the action.type.

Available on my blog.

Step 6: Create Your Component

In your components folder create a js file home.js

Available on my blog.

Step 7: Create Your Store

In the app folder, create a js file store.js

Available on my blog.

Step 8: 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.

Available on my blog.

Step 9: Update Your Main files

Available on my blog.