Services

• External services that to be interacted to redux-cycle
• Usually return Promise to saga to call

Design principle

• app/services/${data-source-frameowk}_${endpoint}.js

  • restful API - axios_paypal.js

  • ddp - meteor_production.js

  • websocket - socket_beta.js

• app/services/${router-framework}.js

  • act as a middleware to translate function to route-push

  • crucial for reusable inter-project component

• app/services/${local-storage}.js

  • act as a middleware to fetch local storage, like realm, couchbase, etc

• app/services/${web-service}.js

  • apple_pay

• mainly used as material for HOF to compose HOC

Reference: Integration of Saga with external service

// ./app/sagas/index.js
import _LocationSearchSaga from '../../common/sagas/_LocationSearch';
import _CartCheckoutSaga from '../../common/sagas/_CartCheckout';
import AccountLoginSaga from '../../common/sagas/AccountLogin';
import createEnhancer from '../../common/sagas/createEnhancer';
import AppService from '../service'; 

const enhance = enhancer(AppService)

function* rootSaga(){
    yield fork(enhance(_LocationSearchSaga));
    yield fork(enhance(_CartCheckoutSaga));
    yield fork(AccountLoginSaga);
}

Reference: Integration with clear ACL

// ./app/sagas/index.js
import _LocationSearchSaga from '../../common/sagas/_LocationSearch';
import _CartCheckoutSaga from '../../common/sagas/_CartCheckout';
import AccountLoginSaga from '../../common/sagas/AccountLogin';
import createEnhancer from '../../common/sagas/createEnhancer';
import { Navigator, Tracker, Axios, LocalStorage } from '../service'; 

function* rootSaga(){
    yield fork(createEnhancer(Navigator)(_LocationSearchSaga));
    yield fork(createEnhancer(Navigator, Axios)(_CartCheckoutSaga));
    yield fork(AccountLoginSaga);
}

Reference: Sharing API endpoints over projects

// ./common/services/_axios_catalog.js
const factory = ({ API_ENDPOINT, USER_AGENT }) => {
  const getPromise = (string) => { 
    return function() {
      console.log(API_ENDPOINT, USER_AGENT, string )
    }
  };
  return {
    fetchStudents: getPromise('/student'),
    fetchTeachers: getPromise('/teachers')
  }
}
export default factory;

// ./app/services/index.js
import _axios_catalog from '../../common/services/_axios_catalog.js';
import * as Config from '../configs';

let axios_catalog = _axios_catalog(Config);
export default {
  ...axios_catalog
}