fix: redux-observable docs

This commit is contained in:
Richard Ramos 2019-09-02 16:49:25 -04:00
parent 08006da987
commit 45bcc2ba25
1 changed files with 22 additions and 17 deletions

View File

@ -77,8 +77,7 @@ eventSyncer.trackEvent(contractObject, eventName, options)
#### `trackBalance(address [, tokenAddress])`
Reacts to changes in the balance of addresses. This method can help track changes in both ETH and ERC20 token balances for each mined block or time interval depending on the `callInterval` configured.
Reacts to changes in the balance of addresses. This method can help track changes in both ETH and ERC20 token balances for each mined block or time interval depending on the `callInterval` configured. Balances are returned as a string containing the vaue in wei.
```js
// Tracking ETH balance
@ -112,8 +111,6 @@ Subscriptions can be disposed by executing the method `unsubscribe()` liberating
```js
const subscription = eventSyncer.trackBalance(address, tokenAddress).subscribe(value => { /* Do something */ });
// ...
// ...
// ...
subscription.unsubscribe();
@ -128,11 +125,11 @@ eventSyncer.clean();
### Integrations
### Integrations with 3rd party libraries
Phoenix does not force you to change the architecture of your dApps, making it easy to integrate in existing projects. Here are some pointers on how to integrate Phoenix with various frontend frameworks:
#### Usage with React
#### Usage with `react`
The `observe` HOC is provided to enhance a presentational component to react to any phoenix event. This HOC subscribes/unsubscribes automatically to any observable it receives via `props`.
```js
@ -180,7 +177,7 @@ ReactDOM.render(<App />, document.getElementById('root'));
#### Usage with Redux
#### Usage with `redux`
Observables can be used with `redux`. The subscription can dispatch actions using if it has access to the redux store:
```js
@ -201,32 +198,40 @@ myObservable.subscribe(eventData => {
# TODO
#### Usage with `redux-observable`
Phoenix can be configured in epics created with [redux-observables](https://redux-observable.js.org/). It's recommended to compose these epics by using [mergeMap](https://www.learnrxjs.io/operators/transformation/mergemap.html) or [switchMap](https://www.learnrxjs.io/operators/transformation/switchmap.html) operators
```js
import {mergeMap, map} from 'rxjs/operators';
##### redux observable
```
const rootEpic = action$ =>
action$.pipe(
ofType("INIT"),
ofType("INIT"), // Execute when the action type is 'INIT'
mergeMap(action =>
eventSyncer
.trackEvent(EscrowContract, "Created", {
filter: { buyer: web3.eth.defaultAccount },
fromBlock: 1
})
.pipe(map(eventData => created(eventData)))
.trackEvent(MyContract, "MyEventName", { filter: {}, fromBlock: 1})
.pipe(
map(eventData => myAction(eventData)) // Trigger redux action: MY_ACTION
)
)
);
// Read more about epics here: https://redux-observable.js.org/docs/basics/Epics.html
const rootReducer = (state = {}, action) => { /* TODO */ };
const epicMiddleware = createEpicMiddleware();
const store = createStore(reducer, applyMiddleware(epicMiddleware));
const store = createStore(rootReducer, applyMiddleware(epicMiddleware));
epicMiddleware.run(rootEpic);
```
# TODO
#### Usage with Graphql
```