after listening to https://egghead.io/courses/getting-started-with-redux
Last active
July 30, 2017 11:46
-
-
Save kosich/256d47537d1f3e309e912bfb77e8c2fb to your computer and use it in GitHub Desktop.
JS Bin// source http://jsbin.com/zigejas
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> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <script src="https://fb.me/react-15.1.0.js"></script> | |
| <script src="https://fb.me/react-dom-15.1.0.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/redux.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/react-redux.js"></script> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script id="jsbin-javascript"> | |
| 'use strict'; | |
| var _Redux = Redux; | |
| var createStore = _Redux.createStore; | |
| var _React = React; | |
| var Component = _React.Component; | |
| var _ReactRedux = ReactRedux; | |
| var Provider = _ReactRedux.Provider; | |
| var connect = _ReactRedux.connect; | |
| var root = function root(state, action) { | |
| if (typeof state === 'undefined') { | |
| return 0; | |
| } | |
| if (action.type === 'INC') { | |
| return state + 1; | |
| } else if (action.type === 'DEC') { | |
| return state - 1; | |
| } else { | |
| return state; | |
| } | |
| }; | |
| var App = connect(function (state) { | |
| return { state: state }; | |
| }, function () {})(function (_ref) { | |
| var state = _ref.state; | |
| return React.createElement( | |
| 'div', | |
| null, | |
| React.createElement(Counter, { value: state }), | |
| React.createElement(Footer, null) | |
| ); | |
| }); | |
| var Footer = connect()(function (_ref2) { | |
| var dispatch = _ref2.dispatch; | |
| return React.createElement( | |
| 'footer', | |
| null, | |
| React.createElement( | |
| 'span', | |
| { | |
| onClick: function () { | |
| return dispatch({ | |
| type: 'DEC' | |
| }); | |
| } | |
| }, | |
| 'Decrement' | |
| ), | |
| React.createElement( | |
| 'span', | |
| { | |
| onClick: function () { | |
| return dispatch({ | |
| type: 'INC' | |
| }); | |
| } | |
| }, | |
| 'Increment' | |
| ) | |
| ); | |
| }); | |
| var Counter = function Counter(_ref3) { | |
| var value = _ref3.value; | |
| return React.createElement( | |
| 'b', | |
| null, | |
| value | |
| ); | |
| }; | |
| ReactDOM.render(React.createElement( | |
| Provider, | |
| { store: createStore(root) }, | |
| React.createElement(App, null) | |
| ), document.getElementById('root')); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const { createStore } = Redux; | |
| const { Component } = React; | |
| const { Provider, connect } = ReactRedux; | |
| const root = (state, action)=>{ | |
| if (typeof state === 'undefined'){ | |
| return 0; | |
| } | |
| if (action.type === 'INC'){ | |
| return state+1; | |
| } else if (action.type === 'DEC') { | |
| return state-1; | |
| } else { | |
| return state; | |
| } | |
| } | |
| const App = connect( | |
| state=>({ state }), | |
| ()=>{} | |
| )(({ state })=>{ | |
| return ( | |
| <div> | |
| <Counter value={ state } /> | |
| <Footer /> | |
| </div> | |
| ); | |
| }); | |
| const Footer = connect()(({ dispatch })=>( | |
| <footer> | |
| <span | |
| onClick={ | |
| ()=>dispatch({ | |
| type: 'DEC' | |
| }) | |
| } | |
| >Decrement</span> | |
| { } | |
| <span | |
| onClick={ | |
| ()=>dispatch({ | |
| type: 'INC' | |
| }) | |
| } | |
| >Increment</span> | |
| </footer> | |
| )); | |
| const Counter = ({ value })=>{ | |
| return <b>{ value }</b>; | |
| } | |
| ReactDOM.render( | |
| <Provider store={ createStore(root) }> | |
| <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
| 'use strict'; | |
| var _Redux = Redux; | |
| var createStore = _Redux.createStore; | |
| var _React = React; | |
| var Component = _React.Component; | |
| var _ReactRedux = ReactRedux; | |
| var Provider = _ReactRedux.Provider; | |
| var connect = _ReactRedux.connect; | |
| var root = function root(state, action) { | |
| if (typeof state === 'undefined') { | |
| return 0; | |
| } | |
| if (action.type === 'INC') { | |
| return state + 1; | |
| } else if (action.type === 'DEC') { | |
| return state - 1; | |
| } else { | |
| return state; | |
| } | |
| }; | |
| var App = connect(function (state) { | |
| return { state: state }; | |
| }, function () {})(function (_ref) { | |
| var state = _ref.state; | |
| return React.createElement( | |
| 'div', | |
| null, | |
| React.createElement(Counter, { value: state }), | |
| React.createElement(Footer, null) | |
| ); | |
| }); | |
| var Footer = connect()(function (_ref2) { | |
| var dispatch = _ref2.dispatch; | |
| return React.createElement( | |
| 'footer', | |
| null, | |
| React.createElement( | |
| 'span', | |
| { | |
| onClick: function () { | |
| return dispatch({ | |
| type: 'DEC' | |
| }); | |
| } | |
| }, | |
| 'Decrement' | |
| ), | |
| React.createElement( | |
| 'span', | |
| { | |
| onClick: function () { | |
| return dispatch({ | |
| type: 'INC' | |
| }); | |
| } | |
| }, | |
| 'Increment' | |
| ) | |
| ); | |
| }); | |
| var Counter = function Counter(_ref3) { | |
| var value = _ref3.value; | |
| return React.createElement( | |
| 'b', | |
| null, | |
| value | |
| ); | |
| }; | |
| ReactDOM.render(React.createElement( | |
| Provider, | |
| { store: createStore(root) }, | |
| 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