README
React-Ajwah
React bindings for ajwah
Installation
>> npm install react-ajwah
API
Connect(
mapState: { [key: string]: Observable<any> },
component?: any
)
useStreamByStateNames(...states: string[])
useStreamBySelect(states: { [key: string]: Observable<any> })
counter
key should be set as a state prop and component should be updated automatecally whenever corrresponding store updated.
Connect() for class component( you can use as a decoretor/normal function ). Here import { select } from "ajwah-store";
@Connect({
counter: select("counter"),
})
class CounterComponent extends PureComponent {}
class CounterComponent extends PureComponent {
constructor() {
//either like a normal function - do not forget to pass the second param this
Connect({ counter: select((state) => state.counter) }, this);
}
}
CounterComponent - Example using connect as a decoretor
import React, { PureComponent } from "react";
import { dispatch, select } from "ajwah-store";
import { Connect } from "react-ajwah";
import { Inc, AsyncInc, Dec } from "./actions";
@Connect({
counter: select((state) => state.counter),
})
class CounterComponent extends PureComponent {
render() {
const { counter } = this.state;
return (
<div>
<button onClick={() => dispatch(Inc)}>+</button>
<button onClick={() => dispatch(Dec)}>-</button>
<button onClick={() => dispatch(AsyncInc)}>async(+)</button>
<span>{counter.msg || counter.count}</span>
</div>
);
}
}
export default CounterComponent;
`CounterComponent - Example using connect as a normal function
import React, { PureComponent } from "react";
import { dispatch, select } from "test-store";
import { Connect } from "test-react-ajwah";
import { Inc, AsyncInc, Dec } from "./actions";
class CounterComponent extends PureComponent {
constructor() {
super();
Connect({ counter: select((state) => state.counter) }, this);
}
render() {
const { counter } = this.state;
return (
<div>
<button onClick={() => dispatch(Inc)}>+</button>
<button onClick={() => dispatch(Dec)}>-</button>
<button onClick={() => dispatch(AsyncInc)}>async(+)</button>
<span>{counter?.msg || counter?.count}</span>
</div>
);
}
}
export default CounterComponent;
takes a single object literal type param (key value pairs). Key should be any name and value should be an Observable Connect decorator/function type that is part of your application's state. You can define as many pairs as you want. All keys and its corresponding states should be available in your component state. Your component should be re-render if any key corresponding state is updated from anywhere in the application.
useStreamByStateNames() / useStreamBySelect() for functional component
import React, { useState, useEffect } from "react";
import { dispatch } from "ajwah-store";
import { useSubscriptions } from "react-ajwah";
import { Inc, Dec, AsyncInc } from "./actions";
function fxCounterComponent() {
const { counter } = useStreamByStateNames("counter");
return (
<div>
<button onClick={() => dispatch(Inc)}>+</button>
<button onClick={() => dispatch(Dec)}>-</button>
<button onClick={() => dispatch(AsyncInc)}>async(+)</button>
{counter?.msg || counter?.count}
</div>
);
}
export default fxCounterComponent;