Skip to content

Instantly share code, notes, and snippets.

@tangxiaocheng

tangxiaocheng/index.html

Created January 14, 2020 00:52
Show Gist options
  • Save tangxiaocheng/e67ad1ba3ca4d77c1505b74cb0a5bbcd to your computer and use it in GitHub Desktop.
Save tangxiaocheng/e67ad1ba3ca4d77c1505b74cb0a5bbcd to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/momanux
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
</head>
<body>
<div id="root">
</div>
<script id="jsbin-javascript">
'use strict';
function reducer(state, action) {
switch (action.type) {
case 'TODO_ADD':
{
return applyAddTodo(state, action);
}
case 'TODO_TOGGLE':
{
return applyToggleTodo(state, action);
}
default:
return state;
}
}
function applyAddTodo(state, action) {
return state.concat(action.todo);
}
function applyToggleTodo(state, action) {
return state.map(function (todo) {
return todo.id === action.todo.id ? Object.assign({}, todo, { completed: !todo.completed }) : todo;
});
}
var store = Redux.createStore(reducer, []);
console.log('initial state:');
console.log(store.getState());
var unsubscribe = store.subscribe(function () {
console.log('store update, current state:');
console.log(store.getState());
});
store.dispatch({
type: 'TODO_ADD',
todo: { id: '0', name: 'learn redux', completed: false }
});
store.dispatch({
type: 'TODO_ADD',
todo: { id: '1', name: 'learn mobx', completed: false }
});
store.dispatch({
type: 'TODO_TOGGLE',
todo: { id: '0' }
});
unsubscribe();
</script>
<script id="jsbin-source-javascript" type="text/javascript">function reducer(state, action) {
switch(action.type) {
case 'TODO_ADD' : {
return applyAddTodo(state, action);
}
case 'TODO_TOGGLE' : {
return applyToggleTodo(state, action);
}
default : return state;
}
}
function applyAddTodo(state, action) {
return state.concat(action.todo);
}
function applyToggleTodo(state, action) {
return state.map(todo =>
todo.id === action.todo.id
? Object.assign({}, todo, { completed: !todo.completed })
: todo
);
}
const store = Redux.createStore(reducer, []);
console.log('initial state:');
console.log(store.getState());
const unsubscribe = store.subscribe(() => {
console.log('store update, current state:');
console.log(store.getState());
});
store.dispatch({
type: 'TODO_ADD',
todo: { id: '0', name: 'learn redux', completed: false },
});
store.dispatch({
type: 'TODO_ADD',
todo: { id: '1', name: 'learn mobx', completed: false },
});
store.dispatch({
type: 'TODO_TOGGLE',
todo: { id: '0' },
});
unsubscribe();</script></body>
</html>
Raw
jsbin.momanux.js
'use strict';
function reducer(state, action) {
switch (action.type) {
case 'TODO_ADD':
{
return applyAddTodo(state, action);
}
case 'TODO_TOGGLE':
{
return applyToggleTodo(state, action);
}
default:
return state;
}
}
function applyAddTodo(state, action) {
return state.concat(action.todo);
}
function applyToggleTodo(state, action) {
return state.map(function (todo) {
return todo.id === action.todo.id ? Object.assign({}, todo, { completed: !todo.completed }) : todo;
});
}
var store = Redux.createStore(reducer, []);
console.log('initial state:');
console.log(store.getState());
var unsubscribe = store.subscribe(function () {
console.log('store update, current state:');
console.log(store.getState());
});
store.dispatch({
type: 'TODO_ADD',
todo: { id: '0', name: 'learn redux', completed: false }
});
store.dispatch({
type: 'TODO_ADD',
todo: { id: '1', name: 'learn mobx', completed: false }
});
store.dispatch({
type: 'TODO_TOGGLE',
todo: { id: '0' }
});
unsubscribe();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment