Created
August 14, 2017 12:49
-
-
Save Deviad/1b887c7f77c8896c6c0073c124b0119f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as ActionTypes from "../ActionTypes" | |
export const fetchUser = username => ({ type: ActionTypes.FETCH_USER, payload: username }); | |
export const fetchUserFulfilled = payload => ({ type: ActionTypes.FETCH_USER_FULFILLED, payload }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const FETCH_USER = 'FETCH_USER'; | |
export const FETCH_USER_FULFILLED = 'FETCH_USER_FULFILLED'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.App { | |
text-align: center; | |
} | |
.App-logo { | |
animation: App-logo-spin infinite 20s linear; | |
height: 80px; | |
} | |
.App-header { | |
background-color: #222; | |
height: 150px; | |
padding: 20px; | |
color: white; | |
} | |
.App-intro { | |
font-size: large; | |
} | |
@keyframes App-logo-spin { | |
from { transform: rotate(0deg); } | |
to { transform: rotate(360deg); } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import {combineReducers, createStore, applyMiddleware, bindActionCreators} from 'redux'; | |
import { combineEpics, createEpicMiddleware } from "redux-observable" | |
import { fetchUser } from "./actions"; | |
import user from './reducers/reducer_user'; | |
import 'rxjs'; | |
import logo from './logo.svg'; | |
import './App.css'; | |
import {connect} from "react-redux"; | |
class App extends Component { | |
constructor(props) { | |
super(props); | |
} | |
render() { | |
return ( | |
<div className="App"> | |
<div> | |
<h1>Fetch User Demo</h1> | |
<button onClick={fetchUser}> | |
Fetch User Info | |
</button> | |
<div> | |
<textarea>{JSON.stringify(this.props.fetchUser, null, 2)}</textarea> | |
</div> | |
</div> | |
</div> | |
); | |
} | |
} | |
function mapStateToProps(state) { | |
return { | |
username: state.username | |
}; | |
} | |
function mapDispatchToProps(dispatch) { | |
// Whenever selectBook is called, the result should be passed | |
// to all of our reducers | |
return bindActionCreators({ fetchUser: fetchUser }, dispatch); | |
} | |
export default connect(mapStateToProps,mapDispatchToProps)(App); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import App from './App'; | |
it('renders without crashing', () => { | |
const div = document.createElement('div'); | |
ReactDOM.render(<App />, div); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createBrowserHistory } from 'history' | |
import { createStore, applyMiddleware, compose } from 'redux'; | |
import { createEpicMiddleware } from 'redux-observable'; | |
import { routerMiddleware } from 'react-router-redux'; | |
import { rootReducer } from './reducers'; | |
import { rootEpic } from './epics'; | |
const history = createBrowserHistory(); | |
const epicMiddleware = createEpicMiddleware(rootEpic); | |
export default function configureStore() { | |
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; | |
const store = createStore( | |
rootReducer, | |
composeEnhancers( | |
applyMiddleware( | |
epicMiddleware, | |
routerMiddleware(history) | |
) | |
) | |
); | |
return store; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as ActionTypes from '../ActionTypes'; | |
import {fetchUserFulfilled} from "../actions"; | |
import 'rxjs'; | |
import { ajax } from 'rxjs/observable/dom/ajax'; | |
export default function fetchUserEpic(action$) { | |
return action$.ofType(ActionTypes.FETCH_USER) | |
.flatMap(action => | |
ajax.getJSON(`https://api.github.com/users/${action.payload}`) | |
.map(response => {console.log("dsadasdas");fetchUserFulfilled(response)}) | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { combineEpics } from 'redux-observable'; | |
import fetchUserEpic from './epic_user_fetch'; | |
export const rootEpic = combineEpics( | |
fetchUserEpic | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 0; | |
padding: 0; | |
font-family: sans-serif; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import { Provider } from 'react-redux'; | |
import { createBrowserHistory } from 'history' | |
import './index.css'; | |
import 'rxjs' | |
import App from './App'; | |
import registerServiceWorker from './registerServiceWorker'; | |
import configureStore from './configureStore'; | |
const store = configureStore(); | |
const history = createBrowserHistory(); | |
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root')); | |
registerServiceWorker(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { combineReducers } from 'redux'; | |
import { routerReducer } from 'react-router-redux'; | |
import users from './reducer_user'; | |
export const rootReducer = combineReducers({ | |
users: users, | |
routing: routerReducer | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as ActionTypes from "../ActionTypes"; | |
export default function users(state={}, action) { | |
switch (action.type) { | |
case ActionTypes.FETCH_USER_FULFILLED: | |
return { | |
...state, | |
// `login` is the username | |
[action.payload.login]: action.payload | |
}; | |
default: | |
return state; | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// In production, we register a service worker to serve assets from local cache. | |
// 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 the "N+1" visit to a page, since previously | |
// cached resources are updated in the background. | |
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. | |
// This link also includes instructions on opting out of this behavior. | |
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 default function register() { | |
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); | |
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/facebookincubator/create-react-app/issues/2374 | |
return; | |
} | |
window.addEventListener('load', () => { | |
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; | |
if (!isLocalhost) { | |
// Is not local host. Just register service worker | |
registerValidSW(swUrl); | |
} else { | |
// This is running on localhost. Lets check if a service worker still exists or not. | |
checkValidServiceWorker(swUrl); | |
} | |
}); | |
} | |
} | |
function registerValidSW(swUrl) { | |
navigator.serviceWorker | |
.register(swUrl) | |
.then(registration => { | |
registration.onupdatefound = () => { | |
const installingWorker = registration.installing; | |
installingWorker.onstatechange = () => { | |
if (installingWorker.state === 'installed') { | |
if (navigator.serviceWorker.controller) { | |
// At this point, the old content will have been purged and | |
// the fresh content will have been added to the cache. | |
// It's the perfect time to display a "New content is | |
// available; please refresh." message in your web app. | |
console.log('New content is available; please refresh.'); | |
} 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.'); | |
} | |
} | |
}; | |
}; | |
}) | |
.catch(error => { | |
console.error('Error during service worker registration:', error); | |
}); | |
} | |
function checkValidServiceWorker(swUrl) { | |
// 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. | |
if ( | |
response.status === 404 || | |
response.headers.get('content-type').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); | |
} | |
}) | |
.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(); | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment