React Native programme Cycle.md

Redux

it is an state container for ( Javascript app ) "React Native" ,This work flow will be followed where(On which view/screen) we need to retrieve data

Redux Actions

it is based on actions(states) for that particular view's data requirement 

Implementation (states), we will update these states(actions.js) later with our api {actions.js}

function getData() {
  return {
  type: FETCHING_DATA
  }
}

function getDataSuccess(data) {
  return {
  type: FETCHING_DATA_SUCCESS,
  data,
  }
}

function getDataFailure() {
  return {
  type: FETCHING_DATA_FAILUR
  }
}

note : make these actions(states) as constants , we will update these constants later with our api

Implementation (constants) {constants.js}

export const FETCHING_DATA = 'FETCHING_DATA'
export const FETCHING_DATA_SUCCESS = 'FETCHING_DATA_SUCCESS'
export const FETCHING_DATA_FAILURE = 'FETCHING_DATA_FAILURE'

Redux Reducers

Redux Actions wrapped in a Reducer

Implementation

const initialState = {
  data: [],
  dataFetched: false,
  isFetching: false,
  error: false,
}

function dataReducer(state = initialState, action) {
  switch(action.type) {
    case FETCHING_DATA:
      return {
        ...state,
        isFetching: true,
      }
    case FETCHING_DATA_SUCCESS:
      return {
        ...state,
        isFetching: false,
        data: action.data,
      }
    case FETCHING_DATA_FAILURE:
      return {
        ...state,
        isFetching: false,
        error: true,
      }
  }
}

note : call these actions(states) from constants in {dataReducer.js}

Implementation

import { FETCHING_DATA, FETCHING_DATA_SUCCESS, FETCHING_DATA_FAILURE } from '../constants'
const initialState = {
data: [],
dataFetched: false,
isFetching: false,
error: false
}

  export default function dataReducer (state = initialState, action) {
  switch (action.type) {
    case FETCHING_DATA:
        return {
          ...state,
          data: [],
          isFetching: true
        }
    case FETCHING_DATA_SUCCESS:
        return {
          ...state,
          isFetching: false,
          data: action.data
        }
    case FETCHING_DATA_FAILURE:
        return {
          ...state,
          isFetching: false,
          error: true
        }
      default:
        return state
  }
}

note : make a entry point {reducers/index.js} to combine all {dataReducer.js}

Implementation

import { combineReducers } from 'redux'
import appData from './dataReducer'

const rootReducer = combineReducers({
    appData
})

export default rootReducer

Redux promise Middleware

 The middleware enables optimistic updates and dispatches pending, fulfilled and rejected actions. It can be combined with redux-thunk to chain async actions.see later usage

note : create a store where we will integrate our app to the redux hirearchy

Implementation

note : 
1. import applyMiddleware from redux
2. import thunk from redux-thunk
3. call createStore, passing in applyMiddleware as the second argument.

create store : {configureStore.js}

import { createStore } from 'redux'
import app from './reducers'

export default function configureStore() {
  let store = createStore(app)
  return store
}

note : create main file{index.js} to add basic redux implementation, where we need to import Provide from react-redux, we need to integrate store with provider and add our application component in it.

Implementation

  import React from 'react'
  import {
    AppRegistry
  } from 'react-native'

  import { Provider } from 'react-redux'
  import configureStore from './configureStore'
  import App from './app'

  const store = configureStore()

  const app = () => (
    <Provider store={store}>
      <App />
    </Provider>
  )

  AppRegistry.registerComponent('applicationComponent', () => app)

Redux Saga

1. it uses a combination of async await and generators to make for a smooth and fun to use api.
2.  To run our Saga, we'll have to connect it to the Redux Store using the redux-saga middleware.

note : to run saga as middleware with your app , ist create {saga.js}

create : {saga.js}

import { FETCHING_DATA, FETCHING_DATA_SUCCESS, FETCHING_DATA_FAILURE } from './constants'
import { put, takeEvery } from 'redux-saga/effects'
import getPeople from './api'

function* fetchData (action) {
  try {
    const data = yield getPeople()
    yield put({ type: FETCHING_DATA_SUCCESS, data })
  } catch (e) {
    yield put({ type: FETCHING_DATA_FAILURE })
  }
}

function* dataSaga () {
  yield takeEvery(FETCHING_DATA, fetchData)
}

export default dataSaga

Implementation {update configureStore.js} (Run Saga as middleware)

import { createStore, applyMiddleware } from 'redux'
import app from './reducers'

import createSagaMiddleware from 'redux-saga'
import dataSaga from './saga'

const sagaMiddleware = createSagaMiddleware()

export default function configureStore() {
  const store = createStore(app, applyMiddleware(sagaMiddleware))
  sagaMiddleware.run(dataSaga)
  return store
}

{update constants.js} with api

export const FETCH_DATA = 'FETCH_DATA'
export const FETCH_DATA_PENDING = 'FETCH_DATA_PENDING'
export const FETCH_DATA_FULFILLED = 'FETCH_DATA_FULFILLED'
export const FETCH_DATA_REJECTED = 'FETCH_DATA_REJECTED'

{update actions.js} with api

import { FETCH_DATA } from './constants'
import getPeople from './api'

export function fetchData() {
  return {
    type: FETCH_DATA,
    payload: getPeople()
  }
}

{update dataReducer.js } with api params

note : Redux Promise Middleware is different in that it takes over your actions and appends _PENDING, _FULFILLED, or _REJECTED actions depending on the outcome of your promise.

import { FETCH_DATA_PENDING, FETCH_DATA_FULFILLED, FETCH_DATA_REJECTED } from '../constants'
const initialState = {
  data: [],
  dataFetched: false,
  isFetching: false,
  error: false
}

export default function dataReducer (state = initialState, action) {
  switch (action.type) {
    case FETCH_DATA_PENDING:
      return {
        ...state,
        data: [],
        isFetching: true
      }
    case FETCH_DATA_FULFILLED:
      return {
        ...state,
        isFetching: false,
        data: action.payload
      }
    case FETCH_DATA_REJECTED:
      return {
        ...state,
        isFetching: false,
        error: true
      }
    default:
      return state
  }
}