Skip to content

Instantly share code, notes, and snippets.

@yashikagarg13
Last active March 18, 2017 05:37
Show Gist options
  • Save yashikagarg13/fd1d75e3bd9d0e55edea1551b732ab06 to your computer and use it in GitHub Desktop.
Save yashikagarg13/fd1d75e3bd9d0e55edea1551b732ab06 to your computer and use it in GitHub Desktop.
JS Bin// source https://jsbin.com/kiqexic = Create Counter App => React + Redux
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://npmcdn.com/expect/umd/expect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
</head>
<body>
<div id="root"></div>
<script id="jsbin-javascript">
"use strict";
var counter = 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(1, {type: "SOMETHING_ELSE"})).toEqual(1);
expect(counter(undefined, {})).toEqual(0); // Test Initial Test
console.log("Test Passed!");*/
var _Redux = Redux;
var createStore = _Redux.createStore;
/*minimal implementation
function createStore (reducer) {
let state;
let listeners = [];
const getState = () => state;
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
}
}
dispatch({});
return {getState, dispatch, subscribe};
}*/
var store = createStore(counter);
/*console.log(store.getState());
store.dispatch({type: "INCREMENT"});
console.log(store.getState());
*/
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: store.dispatch.bind(null, { type: "INCREMENT" }),
onDecrement: store.dispatch.bind(null, { type: "DECREMENT" })
}), document.getElementById("root"));
}
store.subscribe(render);
render();
</script>
<script id="jsbin-source-javascript" type="text/javascript">const 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(1, {type: "SOMETHING_ELSE"})).toEqual(1);
expect(counter(undefined, {})).toEqual(0); // Test Initial Test
console.log("Test Passed!");*/
const {createStore} = Redux;
/*minimal implementation
function createStore (reducer) {
let state;
let listeners = [];
const getState = () => state;
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
}
}
dispatch({});
return {getState, dispatch, subscribe};
}*/
const store = createStore(counter);
/*console.log(store.getState());
store.dispatch({type: "INCREMENT"});
console.log(store.getState());
*/
const Counter = ({value, onIncrement, onDecrement}) => {
return (
<div>
<h1>{value}</h1>
<button onClick={onIncrement}>+</button>
<button onClick={onDecrement}>-</button>
</div>
);
}
function render () {
ReactDOM.render(
<Counter
value={store.getState()}
onIncrement={store.dispatch.bind(null, {type: "INCREMENT"})}
onDecrement={store.dispatch.bind(null, {type: "DECREMENT"})}
/>,
document.getElementById("root")
);
}
store.subscribe(render);
render ();
</script></body></script>
</html>
"use strict";
var counter = 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(1, {type: "SOMETHING_ELSE"})).toEqual(1);
expect(counter(undefined, {})).toEqual(0); // Test Initial Test
console.log("Test Passed!");*/
var _Redux = Redux;
var createStore = _Redux.createStore;
/*minimal implementation
function createStore (reducer) {
let state;
let listeners = [];
const getState = () => state;
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
}
}
dispatch({});
return {getState, dispatch, subscribe};
}*/
var store = createStore(counter);
/*console.log(store.getState());
store.dispatch({type: "INCREMENT"});
console.log(store.getState());
*/
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: store.dispatch.bind(null, { type: "INCREMENT" }),
onDecrement: store.dispatch.bind(null, { type: "DECREMENT" })
}), document.getElementById("root"));
}
store.subscribe(render);
render();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment