Created
May 14, 2019 08:56
-
-
Save guojianwei001/c9ac0a521ad87c9f02dea24246a8ac22 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/jexomi
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script> | |
| <script src="https://unpkg.com/redux@^3.5.2/dist/redux.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/react-redux.min.js"></script> | |
| <script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script> | |
| <script src="https://unpkg.com/redux-observable/dist/redux-observable.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script id="jsbin-javascript"> | |
| /** | |
| * IMPORTANT *************************************************************** | |
| * | |
| * This example uses the global version of RxJS that includes ALL operators. | |
| * Inside your app, you will likely need to import the operators you use or | |
| * import all of them in your index.js entry file. | |
| * | |
| * Learn more about this: http://goo.gl/4ZlYeC | |
| */ | |
| 'use strict'; | |
| console.clear(); | |
| var PING = 'PING'; | |
| var PONG = 'PONG'; | |
| var ping = function ping() { | |
| return { type: PING }; | |
| }; | |
| var pingEpic = function pingEpic(action$) { | |
| return action$.ofType(PING).delay(1000) // Asynchronously wait 1000ms then continue | |
| .mapTo({ type: PONG }); | |
| }; | |
| var pingReducer = function pingReducer(state, action) { | |
| if (state === undefined) state = { isPinging: false }; | |
| switch (action.type) { | |
| case PING: | |
| return { isPinging: true }; | |
| case PONG: | |
| return { isPinging: false }; | |
| default: | |
| return state; | |
| } | |
| }; | |
| // components/App.js | |
| var _ReactRedux = ReactRedux; | |
| var connect = _ReactRedux.connect; | |
| var App = function App(_ref) { | |
| var isPinging = _ref.isPinging; | |
| var ping = _ref.ping; | |
| return React.createElement( | |
| 'div', | |
| null, | |
| React.createElement( | |
| 'h1', | |
| null, | |
| 'is pinging: ', | |
| isPinging.toString() | |
| ), | |
| React.createElement( | |
| 'button', | |
| { onClick: ping }, | |
| 'Start PING' | |
| ) | |
| ); | |
| }; | |
| App = connect(function (_ref2) { | |
| var isPinging = _ref2.isPinging; | |
| return { isPinging: isPinging }; | |
| }, { ping: ping })(App); | |
| // redux/configureStore.js | |
| var _ReactRedux2 = ReactRedux; | |
| var Provider = _ReactRedux2.Provider; | |
| var _Redux = Redux; | |
| var createStore = _Redux.createStore; | |
| var applyMiddleware = _Redux.applyMiddleware; | |
| var _ReduxObservable = ReduxObservable; | |
| var createEpicMiddleware = _ReduxObservable.createEpicMiddleware; | |
| var epicMiddleware = createEpicMiddleware(pingEpic); | |
| var store = createStore(pingReducer, applyMiddleware(epicMiddleware)); | |
| // index.js | |
| ReactDOM.render(React.createElement( | |
| Provider, | |
| { store: store }, | |
| React.createElement(App, null) | |
| ), document.getElementById('root')); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">/** | |
| * IMPORTANT *************************************************************** | |
| * | |
| * This example uses the global version of RxJS that includes ALL operators. | |
| * Inside your app, you will likely need to import the operators you use or | |
| * import all of them in your index.js entry file. | |
| * | |
| * Learn more about this: http://goo.gl/4ZlYeC | |
| */ | |
| console.clear(); | |
| const PING = 'PING'; | |
| const PONG = 'PONG'; | |
| const ping = () => ({ type: PING }); | |
| const pingEpic = action$ => | |
| action$.ofType(PING) | |
| .delay(1000) // Asynchronously wait 1000ms then continue | |
| .mapTo({ type: PONG }); | |
| const pingReducer = (state = { isPinging: false }, action) => { | |
| switch (action.type) { | |
| case PING: | |
| return { isPinging: true }; | |
| case PONG: | |
| return { isPinging: false }; | |
| default: | |
| return state; | |
| } | |
| }; | |
| // components/App.js | |
| const { connect } = ReactRedux; | |
| let App = ({ isPinging, ping }) => ( | |
| <div> | |
| <h1>is pinging: {isPinging.toString()}</h1> | |
| <button onClick={ping}>Start PING</button> | |
| </div> | |
| ); | |
| App = connect( | |
| ({ isPinging }) => ({ isPinging }), | |
| { ping } | |
| )(App); | |
| // redux/configureStore.js | |
| const { Provider } = ReactRedux; | |
| const { createStore, applyMiddleware } = Redux; | |
| const { createEpicMiddleware } = ReduxObservable; | |
| const epicMiddleware = createEpicMiddleware(pingEpic); | |
| const store = createStore(pingReducer, | |
| applyMiddleware(epicMiddleware) | |
| ); | |
| // index.js | |
| ReactDOM.render( | |
| <Provider store={store}> | |
| <App /> | |
| </Provider>, | |
| document.getElementById('root') | |
| ); | |
| </script></body> | |
| </html> |
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
| /** | |
| * IMPORTANT *************************************************************** | |
| * | |
| * This example uses the global version of RxJS that includes ALL operators. | |
| * Inside your app, you will likely need to import the operators you use or | |
| * import all of them in your index.js entry file. | |
| * | |
| * Learn more about this: http://goo.gl/4ZlYeC | |
| */ | |
| 'use strict'; | |
| console.clear(); | |
| var PING = 'PING'; | |
| var PONG = 'PONG'; | |
| var ping = function ping() { | |
| return { type: PING }; | |
| }; | |
| var pingEpic = function pingEpic(action$) { | |
| return action$.ofType(PING).delay(1000) // Asynchronously wait 1000ms then continue | |
| .mapTo({ type: PONG }); | |
| }; | |
| var pingReducer = function pingReducer(state, action) { | |
| if (state === undefined) state = { isPinging: false }; | |
| switch (action.type) { | |
| case PING: | |
| return { isPinging: true }; | |
| case PONG: | |
| return { isPinging: false }; | |
| default: | |
| return state; | |
| } | |
| }; | |
| // components/App.js | |
| var _ReactRedux = ReactRedux; | |
| var connect = _ReactRedux.connect; | |
| var App = function App(_ref) { | |
| var isPinging = _ref.isPinging; | |
| var ping = _ref.ping; | |
| return React.createElement( | |
| 'div', | |
| null, | |
| React.createElement( | |
| 'h1', | |
| null, | |
| 'is pinging: ', | |
| isPinging.toString() | |
| ), | |
| React.createElement( | |
| 'button', | |
| { onClick: ping }, | |
| 'Start PING' | |
| ) | |
| ); | |
| }; | |
| App = connect(function (_ref2) { | |
| var isPinging = _ref2.isPinging; | |
| return { isPinging: isPinging }; | |
| }, { ping: ping })(App); | |
| // redux/configureStore.js | |
| var _ReactRedux2 = ReactRedux; | |
| var Provider = _ReactRedux2.Provider; | |
| var _Redux = Redux; | |
| var createStore = _Redux.createStore; | |
| var applyMiddleware = _Redux.applyMiddleware; | |
| var _ReduxObservable = ReduxObservable; | |
| var createEpicMiddleware = _ReduxObservable.createEpicMiddleware; | |
| var epicMiddleware = createEpicMiddleware(pingEpic); | |
| var store = createStore(pingReducer, applyMiddleware(epicMiddleware)); | |
| // index.js | |
| ReactDOM.render(React.createElement( | |
| Provider, | |
| { store: store }, | |
| React.createElement(App, null) | |
| ), document.getElementById('root')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment