A High Order Component (HOC) injects and manages observable data like rxjs observables, Promises and all other type of data in a react Component.
with using this HOC we can use any data object contains simple primitive (string | Number), complex Object, a function, Promise and rxjs observables in react components. dont worry about subscribes and unsubscribes, this HOC automaticaly manages them. other hand manages services as actions by injecting directly as functions to use in component
some developers want to use event driven pattern and so Rxjs in reaact projects. all knows this is very hard. according our experiance we created this tool for using easily Observabels in reactjs component. without need to manage subscriptions.
- dont worry about subscribe and unsubscribes
- no need redux to manage data model.
- observable data ready in props.
- actions as function in props.
- some needed hooks like onAfter, onBefor,onError can bind,
- manage prerequirment data for render.
- and many usefull features
npm i @barteh/react-withservice --saveimport {withService} from @barteh/react-withserviceimport React, { Component } from 'react';
import { AsService, Server } from '@barteh/AsService';
import Rx from "rxjs"
class Comp extends Component {
render() {
const { srv1, srv2, srv3, srv4, deleteUser } = this.props;
return (
<div>
<div>{srv1}</div>
<div>{srv2}</div>
{srv3 <div>{srv3.name}</div>}
{srv4 <div>{srv4.name}</div>}
<button
onclick={ () => deleteUser(5) }>
deleteUser
</button>
</div>
);
}
}
const servicesObject = {
services: {
srv1: 9 // direct difinition
,
srv2: {
source:(a, b) => {name:`im srv2.name: ${a}-${b}`},
params: props => [props.a,props.b], //mapped props to service parameter
onAfterCall: props => {}, //do somthing after call
onBeforCall: props => true, //a blockable hook
},
srv3: {
source: a => Rx.Observable.of({ name: `im an rxjs observable:${a}` }),
params: props => [props.match.x] //maps route params to service
},
srv4: {
source: new Promise((res, rej) => res({ name: "im from promise" }))
}
},
actions: { // injects as functions to props
deleteUser: new AsService(ui => Server("myserversideController/deleteuser", { userid: ui })),
act2:p=>{return 2*p}, // direct
act3:axios.get("some resources"),
act4:{ //with hooks
action:axios.get("some other resources"),
onBeforCall(...params){
return false; //blockable hook guard
},
onAfterCall(d){
// call after action call
}
}
}
}
export default withService(servicesObject)(Comp);When register a service e.i.
service:(x,y)=>param*5component automaticly subscribe to this service and will render when that parameter change. for example ifx=5,y=6component will render for this params and wont subscribe forx=5,y=1
this clause
params:props=>[props.x,props.match.params.y]is a function, gives props as a parameter and returns series of mapped params just like service's function parameters. hoc binds this props to params and component will render and subscribe with new params.
npm run buildAsService a wrapper for everything like object promise or rxjs observables to reloadable and injectable service.
Machinize a javascript library for creating advanced finit state machine (fsm) with auto transition and observable machine.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent