Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 4, 2018 23:43
Show Gist options
  • Save anonymous/2496ba410c2e5a58f7da5b9b1efc4ece to your computer and use it in GitHub Desktop.
Save anonymous/2496ba410c2e5a58f7da5b9b1efc4ece to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/zijuyeluya
Raw
index.html
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<div id="root"> </div>
<script src="https://unpkg.com/expect@%3C21/umd/expect.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/redux.js"></script>
<script id="jsbin-javascript">
"use strict";
function counter(state, action) {
if (state === undefined) state = 0;
switch (action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
default:
return state;
}
}
// expect(counter(0, {type:"INCREMENT"})).toEqual(1)
// expect(counter(1, {type:"INCREMENT"})).toEqual(2)
// expect(counter(2, {type:"DECREMENT"})).toEqual(1)
// expect(counter(1, {type:"DECREMENT"})).toEqual(0)
// expect(counter(undefined, {type:"INCREMENT"})).toEqual(1)
// console.log("Tests passed!!");
// const {createStore} = Redux;
function createStore(reducer) {
var state = undefined;
var listeners = [];
var dispatch = function dispatch(action) {
state = reducer(state, action);
listeners.forEach(function (listener) {
return listener();
});
};
var getState = function getState() {
return state;
};
var subscribe = function subscribe(listener) {
listeners.push(listener);
};
dispatch({});
return { getState: getState, subscribe: subscribe, dispatch: dispatch };
}
var store = createStore(counter);
var Counter = function Counter(_ref) {
var value = _ref.value;
var onIncrement = _ref.onIncrement;
var onDecrement = _ref.onDecrement;
return React.createElement(
"div",
null,
React.createElement(
"h1",
null,
value
),
React.createElement(
"button",
{ onClick: onIncrement },
" + "
),
React.createElement(
"button",
{ onClick: onDecrement },
" - "
)
);
};
function render() {
ReactDOM.render(React.createElement(Counter, {
value: store.getState(),
onIncrement: function () {
return store.dispatch({ type: "INCREMENT" });
},
onDecrement: function () {
return store.dispatch({ type: "DECREMENT" });
}
}), document.getElementById("root"));
}
render();
store.subscribe(render);
</script>
<script id="jsbin-source-javascript" type="text/javascript">function counter(state = 0, action) {
switch(action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
default:
return state;
}
}
// expect(counter(0, {type:"INCREMENT"})).toEqual(1)
// expect(counter(1, {type:"INCREMENT"})).toEqual(2)
// expect(counter(2, {type:"DECREMENT"})).toEqual(1)
// expect(counter(1, {type:"DECREMENT"})).toEqual(0)
// expect(counter(undefined, {type:"INCREMENT"})).toEqual(1)
// console.log("Tests passed!!");
// const {createStore} = Redux;
function createStore(reducer) {
let state;
let listeners = []
const dispatch = (action ) =>{
state = reducer(state, action)
listeners.forEach(listener => listener())
}
const getState = ()=>{
return state;
}
const subscribe = (listener)=> {
listeners.push(listener)
}
dispatch({});
return {getState , subscribe, dispatch}
}
const store = createStore(counter);
const Counter = ({value, onIncrement, onDecrement})=> (
<div>
<h1>{value}</h1>
<button onClick={onIncrement} > + </button>
<button onClick={onDecrement} > - </button>
</div>
);
function render() {
ReactDOM.render(
<Counter
value={store.getState()}
onIncrement = { () => store.dispatch({type: "INCREMENT"})}
onDecrement = { () => store.dispatch({type: "DECREMENT"})}
/>, document.getElementById("root"));
}
render();
store.subscribe(render)
</script></body>
</html>
Raw
jsbin.zijuyeluya.js
"use strict";
function counter(state, action) {
if (state === undefined) state = 0;
switch (action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
default:
return state;
}
}
// expect(counter(0, {type:"INCREMENT"})).toEqual(1)
// expect(counter(1, {type:"INCREMENT"})).toEqual(2)
// expect(counter(2, {type:"DECREMENT"})).toEqual(1)
// expect(counter(1, {type:"DECREMENT"})).toEqual(0)
// expect(counter(undefined, {type:"INCREMENT"})).toEqual(1)
// console.log("Tests passed!!");
// const {createStore} = Redux;
function createStore(reducer) {
var state = undefined;
var listeners = [];
var dispatch = function dispatch(action) {
state = reducer(state, action);
listeners.forEach(function (listener) {
return listener();
});
};
var getState = function getState() {
return state;
};
var subscribe = function subscribe(listener) {
listeners.push(listener);
};
dispatch({});
return { getState: getState, subscribe: subscribe, dispatch: dispatch };
}
var store = createStore(counter);
var Counter = function Counter(_ref) {
var value = _ref.value;
var onIncrement = _ref.onIncrement;
var onDecrement = _ref.onDecrement;
return React.createElement(
"div",
null,
React.createElement(
"h1",
null,
value
),
React.createElement(
"button",
{ onClick: onIncrement },
" + "
),
React.createElement(
"button",
{ onClick: onDecrement },
" - "
)
);
};
function render() {
ReactDOM.render(React.createElement(Counter, {
value: store.getState(),
onIncrement: function () {
return store.dispatch({ type: "INCREMENT" });
},
onDecrement: function () {
return store.dispatch({ type: "DECREMENT" });
}
}), document.getElementById("root"));
}
render();
store.subscribe(render);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment