React Native with Redux (Part 1)

Today, I discuss about the React Native with Redux and prepare the application for work with firebase. I will discuss all the process by using sample code which connect the react native with redux.

React native is open source mobile application development framework for facebook, which purpose it to provide native app building features for mobile application by using javascript, learn once and use it everywhere.

Redux is popular state management npm package for node js application. most of mordern web framework using the state to manipulate data in views of a website.

Firebase provide cloud and realtime database and hosting service, auth service and lots of feature services for developing mordarn web application.

To works with react-native we need to configure the environment, so we need some tools and packages, which must be installed in development pc.

1. node > 8.10.0
2. watchman (https://facebook.github.io/watchman/docs/install.html)
3. react-native-cli
4. redux, react-redux 5.0.0, redux-thunk, firebase, react-redux-firebase, redux-firestore npm packages

Install and configure the environement for react native

This is an react-native documentation for how to install react native in your development PC. If you already knows about this you can follow my instraction from next sections

Getting Started · React Native

Create the React Native Projects and configure the redux

Command for create the react native app and go to project folder

> react-native init MusicChoise && cd MusicChoise

Install react-redux and redux , redux-thunk npm packages from terminal

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

Configure the Redux with react native

Create the folder named containers in root of the project directory, then create those four files actions.js , reducers.js , async.js , store.js .

actions.js contains the redux actions.

reducers.js contains the redux reducers functions.

async.js will handle firebase async call to get data form firebase database.

Then store.js , where i combine the all reducers of application, adding the redux-thunk middleware to handle the actions, async call of redux from react component.

Setup up the redux with react native and check the configuarion is okay

1. Add the action constraint and action for redux in actions.js file.

2. Then write the reducres for redux store in reducers.js file.

3. Then configure the redux store in store.js file

4. Then wrap the Main component of React App with Redux Store in app.jsx file

5. Then create the components folder and add the Author.jsx file in component folder. then connect the component with redux using connect function. then import the redux actions to Author.jsx file. dispatch the redux actions from Author component.

6. Add the Author component to main App component, so it can access the store of redux , Author component will be visible through the App Component by calling it with in App component

Run the Application in to emulator or simulator by blow command

For Android

> react-native run-android

For iOS

> react-native run-ios

Output after running the commend in terminal. Simulator will open automatically and run the react native application

I will discuss about how to connect the firebase with redux and how to access the data from firbase in react native application in my next part of the article…..