Skip to content

Instantly share code, notes, and snippets.

@marharyta

marharyta/index.html

Created July 15, 2021 19:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marharyta/c1b2e3e5c7ef71b7446541bec0f5ffa6 to your computer and use it in GitHub Desktop.
Save marharyta/c1b2e3e5c7ef71b7446541bec0f5ffa6 to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
// function counter(state=0, action){
// if(action.type == "incr"){
// return state+1;
// } else if (action.type == "decr") {
// return state--;
// }
// // else if (action.type == "async_incr") {
// // // effect
// // return setTimeout(function(){
// // return state + 10;
// // }, 3000);
// // }
// else {
// return state;
// }
// }
// const render = () =>{
// document.body.innerText = store.getState();
// }
// // console.log(counter(0, {type: "incr"}))
// const createStore = function(reducer){
// // state = data, app state
// let state;
// // subscribtions, observers
// let listeners = [];
// // queries
// const getState = () => state;
// // action/Event Dispatch, same thing
// const dispatch = (action) => {
// state = reducer(state, action);
// listeners.forEach(listener => listener());
// return ()=> {
// listeners = listeners.filter(l => l !== listener);
// }
// };
// dispatch({});
// // queries,
// const subscribe = (listener) => {
// listeners.push(listener);
// }
// return {getState, dispatch, subscribe};
// }
// const store = createStore(counter);
// // store.dispatch({type: "incr"});
// store.dispatch({type: "async_incr"});
// // redux thunk "covers" the reducer, dispatching events inside
// // const rerenderandadd = () => {
// // return setInterval(function(){
// // store.dispatch({type: "incr"});
// // }, 3000);
// // }
// store.subscribe(render);
// // rerenderandadd();
// // setInterval(function(){
// // console.log(store.getState())
// // }, 1000);
// render();
// reducer / dispatcher / event handler list
// state = F(old-state, action)
function counter(state=0, action){
if(action.type == "+"){
return state+1;
} else if (action.type == "-") {
return state--;
}
else {
return state;
}
}
const createStore = function(reducer){
// state = data, app state
let state;
// subscribtions, observers
let listeners = [];
// queries
const getState = () => state;
// action/Event Dispatch, same thing
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
return ()=> {
listeners = listeners.filter(l => l !== listener);
}
};
// queries,
const subscribe = (listener) => {
listeners.push(listener);
}
dispatch({});
return {getState, dispatch, subscribe};
}
const store = createStore(counter);
store.dispatch({type: "+"});
console.log(store.getState())
const render = () =>{
document.body.innerText = store.getState();
}
store.subscribe(render);
render();
store.dispatch({type: "async+"});
store.dispatch({type: "async+"});
// store.dispatch({type: "async_incr"});
// // redux thunk "covers" the reducer, dispatching events inside
const rerenderandadd = () => {
return setInterval(function(){
store.dispatch({type: "+"});
}, 3000);
}
rerenderandadd();
const state = {
friends: [],
burgers: []
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">
// function counter(state=0, action){
// if(action.type == "incr"){
// return state+1;
// } else if (action.type == "decr") {
// return state--;
// }
// // else if (action.type == "async_incr") {
// // // effect
// // return setTimeout(function(){
// // return state + 10;
// // }, 3000);
// // }
// else {
// return state;
// }
// }
// const render = () =>{
// document.body.innerText = store.getState();
// }
// // console.log(counter(0, {type: "incr"}))
// const createStore = function(reducer){
// // state = data, app state
// let state;
// // subscribtions, observers
// let listeners = [];
// // queries
// const getState = () => state;
// // action/Event Dispatch, same thing
// const dispatch = (action) => {
// state = reducer(state, action);
// listeners.forEach(listener => listener());
// return ()=> {
// listeners = listeners.filter(l => l !== listener);
// }
// };
// dispatch({});
// // queries,
// const subscribe = (listener) => {
// listeners.push(listener);
// }
// return {getState, dispatch, subscribe};
// }
// const store = createStore(counter);
// // store.dispatch({type: "incr"});
// store.dispatch({type: "async_incr"});
// // redux thunk "covers" the reducer, dispatching events inside
// // const rerenderandadd = () => {
// // return setInterval(function(){
// // store.dispatch({type: "incr"});
// // }, 3000);
// // }
// store.subscribe(render);
// // rerenderandadd();
// // setInterval(function(){
// // console.log(store.getState())
// // }, 1000);
// render();
// reducer / dispatcher / event handler list
// state = F(old-state, action)
function counter(state=0, action){
if(action.type == "+"){
return state+1;
} else if (action.type == "-") {
return state--;
}
else {
return state;
}
}
const createStore = function(reducer){
// state = data, app state
let state;
// subscribtions, observers
let listeners = [];
// queries
const getState = () => state;
// action/Event Dispatch, same thing
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
return ()=> {
listeners = listeners.filter(l => l !== listener);
}
};
// queries,
const subscribe = (listener) => {
listeners.push(listener);
}
dispatch({});
return {getState, dispatch, subscribe};
}
const store = createStore(counter);
store.dispatch({type: "+"});
console.log(store.getState())
const render = () =>{
document.body.innerText = store.getState();
}
store.subscribe(render);
render();
store.dispatch({type: "async+"});
store.dispatch({type: "async+"});
// store.dispatch({type: "async_incr"});
// // redux thunk "covers" the reducer, dispatching events inside
const rerenderandadd = () => {
return setInterval(function(){
store.dispatch({type: "+"});
}, 3000);
}
rerenderandadd();
const state = {
friends: [],
burgers: []
}
</script></body>
</html>
Raw
jsbin.untitled.js
// function counter(state=0, action){
// if(action.type == "incr"){
// return state+1;
// } else if (action.type == "decr") {
// return state--;
// }
// // else if (action.type == "async_incr") {
// // // effect
// // return setTimeout(function(){
// // return state + 10;
// // }, 3000);
// // }
// else {
// return state;
// }
// }
// const render = () =>{
// document.body.innerText = store.getState();
// }
// // console.log(counter(0, {type: "incr"}))
// const createStore = function(reducer){
// // state = data, app state
// let state;
// // subscribtions, observers
// let listeners = [];
// // queries
// const getState = () => state;
// // action/Event Dispatch, same thing
// const dispatch = (action) => {
// state = reducer(state, action);
// listeners.forEach(listener => listener());
// return ()=> {
// listeners = listeners.filter(l => l !== listener);
// }
// };
// dispatch({});
// // queries,
// const subscribe = (listener) => {
// listeners.push(listener);
// }
// return {getState, dispatch, subscribe};
// }
// const store = createStore(counter);
// // store.dispatch({type: "incr"});
// store.dispatch({type: "async_incr"});
// // redux thunk "covers" the reducer, dispatching events inside
// // const rerenderandadd = () => {
// // return setInterval(function(){
// // store.dispatch({type: "incr"});
// // }, 3000);
// // }
// store.subscribe(render);
// // rerenderandadd();
// // setInterval(function(){
// // console.log(store.getState())
// // }, 1000);
// render();
// reducer / dispatcher / event handler list
// state = F(old-state, action)
function counter(state=0, action){
if(action.type == "+"){
return state+1;
} else if (action.type == "-") {
return state--;
}
else {
return state;
}
}
const createStore = function(reducer){
// state = data, app state
let state;
// subscribtions, observers
let listeners = [];
// queries
const getState = () => state;
// action/Event Dispatch, same thing
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
return ()=> {
listeners = listeners.filter(l => l !== listener);
}
};
// queries,
const subscribe = (listener) => {
listeners.push(listener);
}
dispatch({});
return {getState, dispatch, subscribe};
}
const store = createStore(counter);
store.dispatch({type: "+"});
console.log(store.getState())
const render = () =>{
document.body.innerText = store.getState();
}
store.subscribe(render);
render();
store.dispatch({type: "async+"});
store.dispatch({type: "async+"});
// store.dispatch({type: "async_incr"});
// // redux thunk "covers" the reducer, dispatching events inside
const rerenderandadd = () => {
return setInterval(function(){
store.dispatch({type: "+"});
}, 3000);
}
rerenderandadd();
const state = {
friends: [],
burgers: []
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment