redux-observable example

This commit is contained in:
Richard Ramos 2019-09-01 12:15:27 -04:00
parent da0140655f
commit 2584357b56
11 changed files with 11629 additions and 0 deletions

23
test/redux-observable/.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

View File

@ -0,0 +1,36 @@
{
"name": "redux-observable",
"version": "0.1.0",
"private": true,
"dependencies": {
"phoenix": "../..",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^7.1.1",
"react-scripts": "3.1.1",
"redux": "^4.0.4",
"redux-observable": "^1.1.0",
"web3": "^1.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

View File

@ -0,0 +1,10 @@
import React from "react";
import { connect } from "react-redux";
const App = ({ data }) => (
<div>
<h1>Event Data: {JSON.stringify(data)}</h1>
</div>
);
export default connect(({ data }) => ({ data }))(App);

View File

@ -0,0 +1,4 @@
import { CREATED, INIT } from "./constants";
export const init = () => ({type: INIT});
export const created = (eventData) => ({ type: CREATED, eventData });

View File

@ -0,0 +1,2 @@
export const INIT = "INIT";
export const CREATED = "CREATED";

View File

@ -0,0 +1,19 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import store from "./store";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

View File

@ -0,0 +1,12 @@
import { CREATED } from "./constants";
const initialState = { data: {} };
export const reducer = (state = initialState, action) => {
switch (action.type) {
case CREATED:
return { data: action.eventData };
default:
return state;
}
};

View File

@ -0,0 +1,135 @@
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}

View File

@ -0,0 +1,128 @@
import { createStore, applyMiddleware } from "redux";
import { reducer } from "./reducer";
import Web3 from "web3";
import Phoenix from "phoenix";
import { created, init } from "./actions";
import { ofType } from "redux-observable";
import { createEpicMiddleware } from "redux-observable";
import { mergeMap, map } from "rxjs/operators";
const web3 = new Web3("ws://localhost:8545");
let EscrowContract;
let eventSyncer;
web3.eth.getAccounts().then(async accounts => {
web3.eth.defaultAccount = accounts[0];
EscrowContract = await deployContract();
await EscrowContract.methods
.createEscrow(1, accounts[0], accounts[1])
.send({ from: web3.eth.defaultAccount });
await EscrowContract.methods
.createEscrow(2, accounts[0], accounts[2])
.send({ from: web3.eth.defaultAccount });
await EscrowContract.methods
.createEscrow(3, accounts[0], accounts[0])
.send({ from: web3.eth.defaultAccount });
await EscrowContract.methods
.createEscrow(4, accounts[0], accounts[2])
.send({ from: accounts[0] });
eventSyncer = new Phoenix(web3.currentProvider);
await eventSyncer.init();
store.dispatch(init());
});
const rootEpic = action$ =>
action$.pipe(
ofType("INIT"),
mergeMap(action =>
eventSyncer
.trackEvent(EscrowContract, "Created", {
filter: { buyer: web3.eth.defaultAccount },
fromBlock: 1
})
.pipe(map(eventData => created(eventData)))
)
);
const epicMiddleware = createEpicMiddleware();
const store = createStore(reducer, applyMiddleware(epicMiddleware));
epicMiddleware.run(rootEpic);
async function deployContract() {
// pragma solidity >=0.4.22 <0.6.0;
// contract Escrow {
// event Created(uint indexed escrowId, address buyer, address seller);
// function createEscrow(uint escrowId, address buyer, address seller) external {
// emit Created(escrowId, buyer, seller);
// }
// }
let abi = [
{
constant: false,
inputs: [
{
name: "escrowId",
type: "uint256"
},
{
name: "buyer",
type: "address"
},
{
name: "seller",
type: "address"
}
],
name: "createEscrow",
outputs: [],
payable: false,
stateMutability: "nonpayable",
type: "function"
},
{
anonymous: false,
inputs: [
{
indexed: true,
name: "escrowId",
type: "uint256"
},
{
indexed: false,
name: "buyer",
type: "address"
},
{
indexed: false,
name: "seller",
type: "address"
}
],
name: "Created",
type: "event"
}
];
var contract = new web3.eth.Contract(abi);
let instance = await contract
.deploy({
data:
"0x608060405234801561001057600080fd5b50610184806100206000396000f3fe60806040526004361061003b576000357c01000000000000000000000000000000000000000000000000000000009004806378015cf414610040575b600080fd5b34801561004c57600080fd5b506100b96004803603606081101561006357600080fd5b8101908080359060200190929190803573ffffffffffffffffffffffffffffffffffffffff169060200190929190803573ffffffffffffffffffffffffffffffffffffffff1690602001909291905050506100bb565b005b827fcbd6f84bfed2ee8cc01ea152b5d9f7126a72c410dbc5ab04c486a5800627b1908383604051808373ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1681526020018273ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1681526020019250505060405180910390a250505056fea165627a7a72305820cc868ec126578f5508ee248fb823cd9f1ac6deb0562091cdf31843840b2a56410029",
arguments: []
})
.send({
from: web3.eth.defaultAccount,
gas: "4700000"
});
return instance;
}
export default store;

File diff suppressed because it is too large Load Diff