Skip to main content

Feature Mobile API

Similar to Feature Browser API, the backend Feature API support all that need to run the backend application..

It is opiniated and it supports

  • react-native
  • expo
  • apollo-client
  • redux-observable
  • redux
  • redux-persist
  • react-navigation

Components are rendered only through react-navigation, for that we pass routeConfig.

Dynamic Components are provided using slot-fill logic using componentFillPlugins configuration.

Third-party Scripts can be inserted into HTML page as well.

Each of these packaged module is used in the mobile-device like below

import counterModule from '@sample-stack/counter-module-mobile';
import accountModule from '@sample-stack/account-module-mobile';
import paymentModule from '@sample-stack/payment-module-mobile';

const features = new Feature(FeatureWithRouterFactory, counterModule, accountModule, paymentModule);

The mobile-device have all required logic to consolidate the reducers, epics, apollo-client configuration, react-router configuration etc to run the application.

For example provide all the required configuration to the Feature like below. 

const module = new Feature({
    /**
        Customizing ID in the apollo cache.
    **/
    dataIdFromObject,
    /**
        load apollo-client state management. 
    **/
    clientStateParams: { resolvers, typeDefs: schema },
    /**
        load redux-observables to manage the client state.
    **/
    epic: [onUserAccountNotFound],
    /**
        load react-router configuration to display component based on navigation. 
        for more information check [Routing](./routing.mx)
    **/
    routeConfig: filteredRoutes,
    componentFillPlugins: [{
        name: 'teams-contribution',
        render: TeamsContribution,
    }],
    createContainerFunc: [Auth0Module],
    /**
     load reducers to the Redux Store when this Feature Module is used.
    **/
    reducer: { user: userReducer, redirectRoutes: redirectRoutesReducer, authErrors: authErrorsReducer },
    /**
        By default all redux state is persisted using redux-persist, if you need to manipulate the persist state
        add configuration here. 
    **/
    reduxPersistTransforms: [blacklistErrorFilter, blacklistUserFilter]
})

We don't need to put the redux store creation nor apollo-client setup in the Module as this action will be taken care at the higher level (frontend-server).

Client State Management​

Applciation state can be managed using Apollo Link State and Redux.

Redux​

Support redux's reducers Example:

const module = new Feature({
    reducer: { user: userReducer, redirectRoutes: redirectRoutesReducer, authErrors: authErrorsReducer },
    ....
});

Apollo Client State Management​

Support interacting with local data in Apollo Client

Example:

const module = new Feature({
    clientStateParams: { resolvers, typeDefs: schema, typePolicies },
    ....
});
dataIdFromObject​

Support cusotmizing the ID in the apollo cache. More infromation is here

Epic​

Support redux-observable

Example:

const module = new Feature({
    epic: [onUserAccountNotFound],
    ....
});