React Native Reducer Action Notes

 
1. Create action types : types.js

export const LIST_FACET         = 'view_facet_list';
export const LIST_FACET_FAILED  = 'facet_list_failed';
export const LIST_FACET_SUCCESS = 'facet_list_success'; 
 
2. Create junction file : index.js

export * from './CategoryActions';
export * from './FacetAction';


3. Create action file : action.js

import {listproductsAPI} from '../Api/methods/productActionsAPI';
import {
  LIST_PRODUCTS,
  PRODUCT_LIST_FAILED,
  PRODUCT_LIST_SUCCESS
} from './types';

export const productsFetch = () => {
  return (dispatch) => {
    dispatch({ type: LIST_PRODUCTS });
    listproductsAPI()
    .then(productsData => productListResponse(dispatch, productsData.result.docs))
    .catch(error => productlistFail(dispatch, "Products Not Found. Something went wrong. Please try again."));
 
  };
};

const productListFail = (dispatch, error) => { 
  dispatch({
    type: PRODUCT_LIST_FAILED,
    payload: error
  });
};

const productListSuccess = (dispatch, productList) => {
  dispatch({
    type: PRODUCT_LIST_SUCCESS,
    payload: productList
  });
};

const productListResponse = (dispatch, productList) => {
  if(productList._ERROR_MESSAGE_ === undefined || productList._ERROR_MESSAGE_ === null)
  {
    productListSuccess(dispatch, productList);
  }
  else
  {
   productListFail(dispatch,productList._ERROR_MESSAGE_);
   
  }
};


4. Create API constants : ApiConstants.js

export const BASE_URL = 'https://hc-india.hotwax.co';
export const LOGIN = '/api/login';
export const PRODUCT_LIST = '/api/b2c/products';


5. Create API file to fetch data : actionAPI.js

import Api from '..';
import { PRODUCT_LIST } from '../ApiConstants';

export default function listfacetsAPI(facet) {

    return Api(
        PRODUCT_LIST + '?facetList=' + facet,
        null,
        'get',
        null
    );
}


5. Create reducer to set state : facetReducer.js

import {
    LIST_FACET,
    LIST_FACET_FAILED,
    LIST_FACET_SUCCESS
  } from '../actions/types';
 
  const INITIAL_STATE = {
    facetData:[],
    error: null,
    loading: false
  };
 
  export default (state = INITIAL_STATE, action) => {
    switch (action.type) {    
      case LIST_FACET:
        return { ...state, loading: true, error: '' };
      case LIST_FACET_SUCCESS:
        return { ...state, ...INITIAL_STATE, facetData: action.payload, error: '', loading: false };
      case LIST_FACET_FAILED:
        return { ...state, error: action.payload, loading: false };
      default:
        return state;
    }
  };

6. Combine Reducers : index.js

import { combineReducers } from 'redux';
import AuthReducer from './AuthReducer';
import ProductListReducer from './ProductListReducer';
import FacetReducer from './FacetReducer';

export default combineReducers({
  auth: AuthReducer,
  products : ProductListReducer,
  facets : FacetReducer
});


7. Import required action from defined actions and combine reducers

import { connect } from 'react-redux';
import { categoriesFetch, facetFetch } from '../../actions';

8. Trigger Actions on Page.js

     this.props.facetFetch('categoryFacet');