Last active
August 14, 2017 11:28
-
-
Save Deviad/0a687a9400288bfdc973a470642b5f6b to your computer and use it in GitHub Desktop.
I need to know how to make this work with react.It's the official demo from redux-observable
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} 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'; | |
class App extends Component { | |
constructor(props) { | |
super(props); | |
} | |
render() { | |
const { user } = this.props; | |
return ( | |
<div className="App"> | |
<div> | |
<h1>Fetch User Demo</h1> | |
<button onClick={fetchUser}> | |
Fetch User Info | |
</button> | |
<div> | |
<textarea>{JSON.stringify(store.user, null, 2)}</textarea> | |
</div> | |
</div> | |
</div> | |
); | |
} | |
} | |
export default 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 => 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
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, | |
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; | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment