Skip to content

Instantly share code, notes, and snippets.

@victorkane

victorkane/getting-started-redux.html

Forked from anonymous/index.html
Last active November 24, 2015 02:43
Show Gist options
  • Save victorkane/02f5ae1bb2edb3b66524 to your computer and use it in GitHub Desktop.
Save victorkane/02f5ae1bb2edb3b66524 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
getting-started-redux.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://fb.me/react-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.3/redux.js"></script>
</head>
<body>
<div id="root">
</div>
<script id="jsbin-javascript">
/*
* We will be explaining the code below
* in the following lessons. For now,
* feel free to click around and notice
* how the current state tree is logged
* to the console on every change.
*/
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var ADD_TODO = 'ADD_TODO';
var TOGGLE_TODO = 'TOGGLE_TODO';
var SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
var Filters = {
SHOW_ALL: 'SHOW_ALL',
SHOW_COMPLETED: 'SHOW_COMPLETED',
SHOW_ACTIVE: 'SHOW_ACTIVE'
};
/*
* Components
*/
var AddTodo = (function (_React$Component) {
_inherits(AddTodo, _React$Component);
function AddTodo() {
_classCallCheck(this, AddTodo);
_get(Object.getPrototypeOf(AddTodo.prototype), 'constructor', this).apply(this, arguments);
}
_createClass(AddTodo, [{
key: 'render',
value: function render() {
var _this = this;
return React.createElement(
'div',
null,
React.createElement('input', { type: 'text', ref: 'input' }),
React.createElement(
'button',
{ onClick: function (e) {
return _this.handleClick(e);
} },
'Add'
)
);
}
}, {
key: 'handleClick',
value: function handleClick(e) {
var node = this.refs.input;
var text = node.value.trim();
this.props.onAddClick(text);
node.value = '';
}
}]);
return AddTodo;
})(React.Component);
var FilterLink = function FilterLink(_ref) {
var isActive = _ref.isActive;
var name = _ref.name;
var onClick = _ref.onClick;
if (isActive) {
return React.createElement(
'span',
null,
name
);
}
return React.createElement(
'a',
{ href: '#', onClick: function (e) {
e.preventDefault();onClick();
} },
name
);
};
var Footer = function Footer(_ref2) {
var filter = _ref2.filter;
var onFilterChange = _ref2.onFilterChange;
return React.createElement(
'p',
null,
'Show:',
' ',
React.createElement(FilterLink, {
name: 'All',
isActive: filter === Filters.SHOW_ALL,
onClick: function () {
return onFilterChange(Filters.SHOW_ALL);
} }),
', ',
React.createElement(FilterLink, {
name: 'Completed',
isActive: filter === Filters.SHOW_COMPLETED,
onClick: function () {
return onFilterChange(Filters.SHOW_COMPLETED);
} }),
', ',
React.createElement(FilterLink, {
name: 'Active',
isActive: filter === Filters.SHOW_ACTIVE,
onClick: function () {
return onFilterChange(Filters.SHOW_ACTIVE);
} })
);
};
var Todo = function Todo(_ref3) {
var onClick = _ref3.onClick;
var completed = _ref3.completed;
var text = _ref3.text;
return React.createElement(
'li',
{
onClick: onClick,
style: {
textDecoration: completed ? 'line-through' : 'none',
cursor: 'pointer'
} },
text
);
};
var TodoList = function TodoList(_ref4) {
var todos = _ref4.todos;
var onTodoClick = _ref4.onTodoClick;
return React.createElement(
'ul',
null,
todos.map(function (todo) {
return React.createElement(Todo, _extends({}, todo, {
key: todo.id,
onClick: function () {
return onTodoClick(todo.id);
} }));
})
);
};
var nextTodoId = 0;
var TodoApp = function TodoApp(_ref5) {
var dispatch = _ref5.dispatch;
var todos = _ref5.todos;
var visibilityFilter = _ref5.visibilityFilter;
var visibleTodos = todos;
switch (visibilityFilter) {
case Filters.SHOW_COMPLETED:
visibleTodos = todos.filter(function (todo) {
return todo.completed;
});
break;
case Filters.SHOW_ACTIVE:
visibleTodos = todos.filter(function (todo) {
return !todo.completed;
});
break;
}
return React.createElement(
'div',
null,
React.createElement(AddTodo, {
onAddClick: function (text) {
return dispatch({ type: ADD_TODO, text: text, id: nextTodoId++ });
} }),
React.createElement(TodoList, {
todos: visibleTodos,
onTodoClick: function (id) {
return dispatch({ type: TOGGLE_TODO, id: id });
} }),
React.createElement(Footer, {
filter: visibilityFilter,
onFilterChange: function (filter) {
return dispatch({ type: SET_VISIBILITY_FILTER, filter: filter });
} })
);
};
/*
* Reducers
*/
var visibilityFilter = function visibilityFilter(state, action) {
if (state === undefined) state = Filters.SHOW_ALL;
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.filter;
default:
return state;
}
};
var todos = function todos(state, action) {
if (state === undefined) state = [];
switch (action.type) {
case ADD_TODO:
return [].concat(_toConsumableArray(state), [{
text: action.text,
id: action.id,
completed: false
}]);
case TOGGLE_TODO:
return state.map(function (todo) {
return todo.id === action.id ? Object.assign({}, todo, { completed: !todo.completed }) : todo;
});
default:
return state;
}
};
var todoApp = Redux.combineReducers({
visibilityFilter: visibilityFilter,
todos: todos
});
/*
* Go!
*/
var store = Redux.createStore(todoApp);
var dispatch = function dispatch(action) {
store.dispatch(action);
console.log('----------------');
console.log('current state:');
console.log(store.getState());
};
var render = function render() {
ReactDOM.render(React.createElement(TodoApp, _extends({}, store.getState(), {
dispatch: dispatch
})), document.getElementById('root'));
};
render();
store.subscribe(render);
console.log('current state:');
console.log(store.getState());
// noprotect
</script>
<script id="jsbin-source-javascript" type="text/javascript">/*
* We will be explaining the code below
* in the following lessons. For now,
* feel free to click around and notice
* how the current state tree is logged
* to the console on every change.
*/
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';
const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
const Filters = {
SHOW_ALL: 'SHOW_ALL',
SHOW_COMPLETED: 'SHOW_COMPLETED',
SHOW_ACTIVE: 'SHOW_ACTIVE'
};
/*
* Components
*/
class AddTodo extends React.Component {
render() {
return (
<div>
<input type='text' ref='input' />
<button onClick={(e) => this.handleClick(e)}>
Add
</button>
</div>
);
}
handleClick(e) {
const node = this.refs.input;
const text = node.value.trim();
this.props.onAddClick(text);
node.value = '';
}
}
const FilterLink = ({ isActive, name, onClick }) => {
if (isActive) {
return <span>{name}</span>;
}
return (
<a href='#' onClick={e => { e.preventDefault(); onClick(); }}>
{name}
</a>
);
};
const Footer = ({ filter, onFilterChange }) => (
<p>
Show:
{' '}
<FilterLink
name='All'
isActive={filter === Filters.SHOW_ALL}
onClick={() => onFilterChange(Filters.SHOW_ALL)} />
{', '}
<FilterLink
name='Completed'
isActive={filter === Filters.SHOW_COMPLETED}
onClick={() => onFilterChange(Filters.SHOW_COMPLETED)} />
{', '}
<FilterLink
name='Active'
isActive={filter === Filters.SHOW_ACTIVE}
onClick={() => onFilterChange(Filters.SHOW_ACTIVE)} />
</p>
);
const Todo = ({ onClick, completed, text }) => (
<li
onClick={onClick}
style={{
textDecoration: completed ? 'line-through' : 'none',
cursor: 'pointer'
}}>
{text}
</li>
);
const TodoList = ({ todos, onTodoClick }) => (
<ul>
{todos.map(todo =>
<Todo {...todo}
key={todo.id}
onClick={() => onTodoClick(todo.id)} />
)}
</ul>
);
let nextTodoId = 0;
const TodoApp = ({ dispatch, todos, visibilityFilter }) => {
let visibleTodos = todos;
switch (visibilityFilter) {
case Filters.SHOW_COMPLETED:
visibleTodos = todos.filter(todo => todo.completed);
break;
case Filters.SHOW_ACTIVE:
visibleTodos = todos.filter(todo => !todo.completed);
break;
}
return (
<div>
<AddTodo
onAddClick={text =>
dispatch({ type: ADD_TODO, text, id: nextTodoId++ })
} />
<TodoList
todos={visibleTodos}
onTodoClick={id =>
dispatch({ type: TOGGLE_TODO, id })
} />
<Footer
filter={visibilityFilter}
onFilterChange={filter =>
dispatch({ type: SET_VISIBILITY_FILTER, filter })
} />
</div>
);
};
/*
* Reducers
*/
const visibilityFilter = (state = Filters.SHOW_ALL, action) => {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.filter;
default:
return state;
}
}
const todos = (state = [], action) => {
switch (action.type) {
case ADD_TODO:
return [...state, {
text: action.text,
id: action.id,
completed: false
}];
case TOGGLE_TODO:
return state.map(todo =>
todo.id === action.id ?
Object.assign({}, todo, { completed: !todo.completed }) :
todo
);
default:
return state;
}
}
const todoApp = Redux.combineReducers({
visibilityFilter,
todos
});
/*
* Go!
*/
const store = Redux.createStore(todoApp);
const dispatch = (action) => {
store.dispatch(action);
console.log('----------------');
console.log('current state:');
console.log(store.getState());
}
const render = () => {
ReactDOM.render(
<TodoApp
{...store.getState()}
dispatch={dispatch}
/>,
document.getElementById('root')
);
}
render();
store.subscribe(render);
console.log('current state:');
console.log(store.getState());
// noprotect</script></body>
</html>
Raw
jsbin.yayobopoxu.js
/*
* We will be explaining the code below
* in the following lessons. For now,
* feel free to click around and notice
* how the current state tree is logged
* to the console on every change.
*/
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var ADD_TODO = 'ADD_TODO';
var TOGGLE_TODO = 'TOGGLE_TODO';
var SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
var Filters = {
SHOW_ALL: 'SHOW_ALL',
SHOW_COMPLETED: 'SHOW_COMPLETED',
SHOW_ACTIVE: 'SHOW_ACTIVE'
};
/*
* Components
*/
var AddTodo = (function (_React$Component) {
_inherits(AddTodo, _React$Component);
function AddTodo() {
_classCallCheck(this, AddTodo);
_get(Object.getPrototypeOf(AddTodo.prototype), 'constructor', this).apply(this, arguments);
}
_createClass(AddTodo, [{
key: 'render',
value: function render() {
var _this = this;
return React.createElement(
'div',
null,
React.createElement('input', { type: 'text', ref: 'input' }),
React.createElement(
'button',
{ onClick: function (e) {
return _this.handleClick(e);
} },
'Add'
)
);
}
}, {
key: 'handleClick',
value: function handleClick(e) {
var node = this.refs.input;
var text = node.value.trim();
this.props.onAddClick(text);
node.value = '';
}
}]);
return AddTodo;
})(React.Component);
var FilterLink = function FilterLink(_ref) {
var isActive = _ref.isActive;
var name = _ref.name;
var onClick = _ref.onClick;
if (isActive) {
return React.createElement(
'span',
null,
name
);
}
return React.createElement(
'a',
{ href: '#', onClick: function (e) {
e.preventDefault();onClick();
} },
name
);
};
var Footer = function Footer(_ref2) {
var filter = _ref2.filter;
var onFilterChange = _ref2.onFilterChange;
return React.createElement(
'p',
null,
'Show:',
' ',
React.createElement(FilterLink, {
name: 'All',
isActive: filter === Filters.SHOW_ALL,
onClick: function () {
return onFilterChange(Filters.SHOW_ALL);
} }),
', ',
React.createElement(FilterLink, {
name: 'Completed',
isActive: filter === Filters.SHOW_COMPLETED,
onClick: function () {
return onFilterChange(Filters.SHOW_COMPLETED);
} }),
', ',
React.createElement(FilterLink, {
name: 'Active',
isActive: filter === Filters.SHOW_ACTIVE,
onClick: function () {
return onFilterChange(Filters.SHOW_ACTIVE);
} })
);
};
var Todo = function Todo(_ref3) {
var onClick = _ref3.onClick;
var completed = _ref3.completed;
var text = _ref3.text;
return React.createElement(
'li',
{
onClick: onClick,
style: {
textDecoration: completed ? 'line-through' : 'none',
cursor: 'pointer'
} },
text
);
};
var TodoList = function TodoList(_ref4) {
var todos = _ref4.todos;
var onTodoClick = _ref4.onTodoClick;
return React.createElement(
'ul',
null,
todos.map(function (todo) {
return React.createElement(Todo, _extends({}, todo, {
key: todo.id,
onClick: function () {
return onTodoClick(todo.id);
} }));
})
);
};
var nextTodoId = 0;
var TodoApp = function TodoApp(_ref5) {
var dispatch = _ref5.dispatch;
var todos = _ref5.todos;
var visibilityFilter = _ref5.visibilityFilter;
var visibleTodos = todos;
switch (visibilityFilter) {
case Filters.SHOW_COMPLETED:
visibleTodos = todos.filter(function (todo) {
return todo.completed;
});
break;
case Filters.SHOW_ACTIVE:
visibleTodos = todos.filter(function (todo) {
return !todo.completed;
});
break;
}
return React.createElement(
'div',
null,
React.createElement(AddTodo, {
onAddClick: function (text) {
return dispatch({ type: ADD_TODO, text: text, id: nextTodoId++ });
} }),
React.createElement(TodoList, {
todos: visibleTodos,
onTodoClick: function (id) {
return dispatch({ type: TOGGLE_TODO, id: id });
} }),
React.createElement(Footer, {
filter: visibilityFilter,
onFilterChange: function (filter) {
return dispatch({ type: SET_VISIBILITY_FILTER, filter: filter });
} })
);
};
/*
* Reducers
*/
var visibilityFilter = function visibilityFilter(state, action) {
if (state === undefined) state = Filters.SHOW_ALL;
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.filter;
default:
return state;
}
};
var todos = function todos(state, action) {
if (state === undefined) state = [];
switch (action.type) {
case ADD_TODO:
return [].concat(_toConsumableArray(state), [{
text: action.text,
id: action.id,
completed: false
}]);
case TOGGLE_TODO:
return state.map(function (todo) {
return todo.id === action.id ? Object.assign({}, todo, { completed: !todo.completed }) : todo;
});
default:
return state;
}
};
var todoApp = Redux.combineReducers({
visibilityFilter: visibilityFilter,
todos: todos
});
/*
* Go!
*/
var store = Redux.createStore(todoApp);
var dispatch = function dispatch(action) {
store.dispatch(action);
console.log('----------------');
console.log('current state:');
console.log(store.getState());
};
var render = function render() {
ReactDOM.render(React.createElement(TodoApp, _extends({}, store.getState(), {
dispatch: dispatch
})), document.getElementById('root'));
};
render();
store.subscribe(render);
console.log('current state:');
console.log(store.getState());
// noprotect
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment