This is a example react project for using REPOSITORY pattern in REACT with REDUX. For accessing the library of react-redux-repository please visit:

https://github.com/blazerroad/react-redux-repository

For accessing the library of reac-native-repository please visit:

https://github.com/blazerroad/react-native-repository

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

npm i react-redux-respository --save

Step 2

For actions you should add two folders :

-respositories
-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

import {DefaultEntity } from 'react-native-repository/repository'

export class TopHashtag extends DefaultEntity {

    id : string;
    title : string;

    constructor(id? : string, title? : string) {
        super();
        this.id = id;
        this.title = title;
    }
}

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.

import { AzureCosmosRepository,AzureFetchEntityMetaData } from "react-native-repository/repository"
import { TopHashtag } from '../../models/TopHashtag'

export class TopHashtagRepository extends AzureCosmosRepository<TopHashtag>
{
    constructor()
    {
        const metaData = new AzureFetchEntityMetaData("TopHashtag","Hashtag","Chiko");
        super(metaData);
    }
    async map(response: Response): Promise<Array<TopHashtag>> {
       const mapping = this.innerMap(response, new TopHashtag(), new Array<TopHashtag>());
       return mapping;
    }
}

service

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

import { BaseReduxService } from "react-native-repository/repository"
import { TopHashtag } from '../../models/TopHashtag'
import {TopHashtagRepository} from '../repositories/TopHastagsRepository'

export class TopHashtagsService extends BaseReduxService<TopHashtag,TopHashtagRepository>
{
    constructor(dispatch: any)
    {
        const repository = new  TopHashtagRepository();
        super(dispatch,repository);
    }

}

service FACAD

this class is contains instance of all services which created.

import { TopHashtagsService } from "./TopHashtagsService";
import { UploadImage } from "./UploadImage";
import { initAzureCosmos } from 'react-native-azure-cosmos/azurecosmos'

export class Services {
    public static instance: Services;

    public static init(dispatch: any) {
        Services.instance = new Services(dispatch);
    }

    public topHashtage: TopHashtagsService
    public uploadImage: UploadImage

    private constructor(dispatch: any) {
        this.topHashtage = new TopHashtagsService(dispatch);
        this.uploadImage = new UploadImage();
       
    }
}

add service FACAD to REDUX

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

import { Services } from './store/actions/services/services'

const store = createStore(rootReducer, applyMiddleware(crashReporter, thunk, vanillaPromise, readyStatePromise));
Services.init(store.dispatch);

blazerroad/Addressbook