/mesan-react-native-hooks-redux-boilerplate

Tutorial 1a/1b : React Native with React Hooks and Redux Boilerplate

Primary LanguageJavaScript

Tutorial 1a : React Native with React Hooks and Redux Boilerplate

Boilerplate for a React Native iOS and Android app using Redux

Demo

Demo

Tutorial

Step 1: Create React Native Project

Open terminal and run

expo init ProjectName
cd ProjectName

Step 2: Install Dependencies

In your project root, run

npm i --save redux react-redux redux-thunk axios

Step 3: Create Folder Structure

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

Step 4: Create Your First Action

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch(). Action creators are exactly that — functions that create actions.
Update the actions.js file, in here we will create our actions and action creators.

export const DATA_AVAILABLE = 'DATA_AVAILABLE';

export const addData = (data) => ({
    type: DATA_AVAILABLE,
    data
});

Step 5: Create Your First Reducer

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

The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.

Available on my blog.

Step 6: Create Your Store

…the actions represent the facts about “what happened” and the reducers that update the state according to those actions.

The Store is the object that brings them together.

Update store.js file. In this file, create the redux store by importing the root reducer and injecting the Redux Thunk middleware.

Available on my blog.

Step 7: Create Your Component

In your components folder create a js file home.js

Available on my blog.

Step 8: Link It All Together

The App.js file is the entry point into the app. In this file, the redux store is connected to the Redux provider, giving the app access to the redux state.

The app’s router is wrapped with the Provider.

The makes the Redux store available to any nested components that have been wrapped in the connect() function.

Update App.js file.

Available on my blog.

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

$ expo start