react-native-repository

if you are searching for way to write cleaner code, prevent using fetch all over your ACTIONS and you are not happy with very big long REDUCER switch this is solution for you for example app visit : https://github.com/blazerroad/workwolf/

Diagram

Why

This example show you how you can manage your code better with redux pattern if you are involved in mid-size or bigger application, with help of Repository pattern you can achieve SOLID principal and make cleaner, extendable, easy to change

How

Step 1

Install

1npm i react-native-repository --save

Step 2

For actions you should add two folders :

1-respositories
2-services

repository pattern is base on type of entity, for each entity you should add :

• model
• respository
• service

Model

each model should be extends IEntity, DefaultEntity is default calss implemented IEntity you can use DefaultEntity or implement your own

1import {DefaultEntity } from 'react-native-repository/repository'
2
3export class TopHashtag extends DefaultEntity {
4
5    id : string;
6    title : string;
7
8    constructor(id? : string, title? : string) {
9        super();
10        this.id = id;
11        this.title = title;
12    }
13}

Repository

each repository should extends IRepository at react-native-repository I developed two repository for "Azure cosmos" and "azure germlin cosmos" for react-redux-libarary you should implement your own base repository base the backend service which your are using.

1import { AzureCosmosRepository,AzureFetchEntityMetaData } from "react-native-repository/repository"
2import { TopHashtag } from '../../models/TopHashtag'
3
4export class TopHashtagRepository extends AzureCosmosRepository<TopHashtag>
5{
6    constructor()
7    {
8        const metaData = new AzureFetchEntityMetaData("TopHashtag","Hashtag","Chiko");
9        super(metaData);
10    }
11    async map(response: Response): Promise<Array<TopHashtag>> {
12       const mapping = this.innerMap(response, new TopHashtag(), new Array<TopHashtag>());
13       return mapping;
14    }
15}

service

each service should extends IService for REDUX I implemented BaseReduxService but you can impliment any Base service.

1import { BaseReduxService } from "react-native-repository/repository"
2import { TopHashtag } from '../../models/TopHashtag'
3import {TopHashtagRepository} from '../repositories/TopHastagsRepository'
4
5export class TopHashtagsService extends BaseReduxService<TopHashtag,TopHashtagRepository>
6{
7    constructor(dispatch: any)
8    {
9        const repository = new  TopHashtagRepository();
10        super(dispatch,repository);
11    }
12
13}

service FACAD

this class is contains instance of all services which created.

1
2import { TopHashtagsService } from "./TopHashtagsService";
3import { UploadImage } from "./UploadImage";
4import { initAzureCosmos } from 'react-native-azure-cosmos/azurecosmos'
5
6export class Services {
7    public static instance: Services;
8
9    public static init(dispatch: any) {
10        Services.instance = new Services(dispatch);
11    }
12
13    public topHashtage: TopHashtagsService
14    public uploadImage: UploadImage
15
16    private constructor(dispatch: any) {
17        this.topHashtage = new TopHashtagsService(dispatch);
18        this.uploadImage = new UploadImage();
19       
20    }
21}

add service FACAD to REDUX

after creating your store call Services.init(store.dispatch)

1import { Services } from './store/actions/services/services'
2
3const store = createStore(rootReducer, applyMiddleware(crashReporter, thunk, vanillaPromise, readyStatePromise));
4Services.init(store.dispatch);