Created
March 31, 2017 18:19
-
-
Save razchiriac/0cbd2c92eddfc1ed9cac7ab8c803a208 to your computer and use it in GitHub Desktop.
React+Redux Todo List // source https://jsbin.com/ceyehig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>React+Redux Todo List</title> | |
<script src="https://unpkg.com/redux@3.6.0/dist/redux.min.js"></script> | |
<script src="https://unpkg.com/expect/umd/expect.min.js"></script> | |
<script src="https://fb.me/react-with-addons-15.1.0.js"></script> | |
<script src="https://fb.me/react-dom-15.1.0.js"></script> | |
</head> | |
<body> | |
<div id='root'></div> | |
<script id="jsbin-javascript"> | |
// todo reducer | |
// handles actions for individual todos | |
'use strict'; | |
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); } } }; | |
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; }; | |
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 todo = function todo(state, action) { | |
switch (action.type) { | |
case 'ADD_TODO': | |
return { | |
id: action.id, | |
text: action.text, | |
completed: false | |
}; | |
case 'TOGGLE_TODO': | |
if (state.id !== action.id) return state; | |
return _extends({}, state, { | |
completed: !state.completed | |
}); | |
default: | |
return state; | |
} | |
}; | |
// todos reducer | |
// handles actions for the todos list | |
var todos = function todos(state, action) { | |
if (state === undefined) state = []; | |
switch (action.type) { | |
case 'ADD_TODO': | |
return [].concat(_toConsumableArray(state), [todo(undefined, action)]); | |
case 'TOGGLE_TODO': | |
return state.map(function (t) { | |
return todo(t, action); | |
}); | |
default: | |
return state; | |
} | |
}; | |
// visibilityFilter reducer | |
// handles actions for updating filters | |
var visibilityFilter = function visibilityFilter(state, action) { | |
if (state === undefined) state = 'SHOW_ALL'; | |
switch (action.type) { | |
case 'SET_VISIBILITY_FILTER': | |
return action.filter; | |
default: | |
return state; | |
} | |
}; | |
// import combineReducers from Redux | |
// this does the Reducer Composition for us | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
// use combineReducers to combine all reducers | |
// into a single top-level reducer called todoApp | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
// import createStore from Redux | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
// make the store for the app by | |
// calling createStore and passing | |
// the todoApp as the reducer | |
var store = createStore(todoApp); | |
// get the base class for all components from react | |
var _React = React; | |
var Component = _React.Component; | |
var nextTodoId = 0; | |
var TodoApp = (function (_Component) { | |
_inherits(TodoApp, _Component); | |
function TodoApp() { | |
_classCallCheck(this, TodoApp); | |
_get(Object.getPrototypeOf(TodoApp.prototype), 'constructor', this).apply(this, arguments); | |
} | |
_createClass(TodoApp, [{ | |
key: 'render', | |
value: function render() { | |
return React.createElement( | |
'div', | |
null, | |
React.createElement( | |
'button', | |
{ onClick: function () { | |
store.dispatch({ | |
type: 'ADD_TODO', | |
text: 'Test', | |
id: nextTodoId++ | |
}); | |
} }, | |
'Add Todo' | |
), | |
React.createElement( | |
'ul', | |
null, | |
this.props.todos.map(function (todo) { | |
return React.createElement( | |
'li', | |
{ key: todo.id }, | |
todo.text | |
); | |
}) | |
) | |
); | |
} | |
}]); | |
return TodoApp; | |
})(Component); | |
; | |
// update dom in response to the current app state | |
// the implementation of the render method | |
// will use react | |
var render = function render() { | |
ReactDOM.render(React.createElement(TodoApp, { todos: store.getState().todos }), document.getElementById('root')); | |
}; | |
render(); | |
// register render as a listener. | |
// this means that render will be | |
// called every time the store updates | |
// this happens every time an action | |
// is dispatched. | |
store.subscribe(render); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">// todo reducer | |
// handles actions for individual todos | |
const todo = (state, action) => { | |
switch (action.type) { | |
case 'ADD_TODO': | |
return { | |
id: action.id, | |
text: action.text, | |
completed: false | |
}; | |
case 'TOGGLE_TODO': | |
if (state.id !== action.id) return state; | |
return { | |
...state, | |
completed: !state.completed | |
}; | |
default: | |
return state; | |
} | |
}; | |
// todos reducer | |
// handles actions for the todos list | |
const todos = (state = [], action) => { | |
switch (action.type) { | |
case 'ADD_TODO': | |
return [ | |
...state, | |
todo(undefined, action) | |
]; | |
case 'TOGGLE_TODO': | |
return state.map(t => todo(t, action)); | |
default: | |
return state; | |
} | |
}; | |
// visibilityFilter reducer | |
// handles actions for updating filters | |
const visibilityFilter = (state = 'SHOW_ALL', action) => { | |
switch (action.type) { | |
case 'SET_VISIBILITY_FILTER': | |
return action.filter; | |
default: | |
return state; | |
} | |
}; | |
// import combineReducers from Redux | |
// this does the Reducer Composition for us | |
const { combineReducers } = Redux; | |
// use combineReducers to combine all reducers | |
// into a single top-level reducer called todoApp | |
const todoApp = combineReducers({ | |
todos, | |
visibilityFilter | |
}); | |
// import createStore from Redux | |
const { createStore } = Redux; | |
// make the store for the app by | |
// calling createStore and passing | |
// the todoApp as the reducer | |
const store = createStore(todoApp); | |
// get the base class for all components from react | |
const { Component } = React; | |
let nextTodoId = 0; | |
class TodoApp extends Component { | |
render() { | |
return ( | |
<div> | |
<button onClick={() => { | |
store.dispatch({ | |
type: 'ADD_TODO', | |
text: 'Test', | |
id: nextTodoId++ | |
}); | |
}}> | |
Add Todo | |
</button> | |
<ul> | |
{this.props.todos.map(todo => | |
<li key={todo.id}> | |
{todo.text} | |
</li> | |
)} | |
</ul> | |
</div> | |
); | |
}; | |
}; | |
// update dom in response to the current app state | |
// the implementation of the render method | |
// will use react | |
const render = () => { | |
ReactDOM.render( | |
<TodoApp todos={store.getState().todos} />, | |
document.getElementById('root') | |
); | |
}; | |
render(); | |
// register render as a listener. | |
// this means that render will be | |
// called every time the store updates | |
// this happens every time an action | |
// is dispatched. | |
store.subscribe(render); | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// todo reducer | |
// handles actions for individual todos | |
'use strict'; | |
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); } } }; | |
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; }; | |
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 todo = function todo(state, action) { | |
switch (action.type) { | |
case 'ADD_TODO': | |
return { | |
id: action.id, | |
text: action.text, | |
completed: false | |
}; | |
case 'TOGGLE_TODO': | |
if (state.id !== action.id) return state; | |
return _extends({}, state, { | |
completed: !state.completed | |
}); | |
default: | |
return state; | |
} | |
}; | |
// todos reducer | |
// handles actions for the todos list | |
var todos = function todos(state, action) { | |
if (state === undefined) state = []; | |
switch (action.type) { | |
case 'ADD_TODO': | |
return [].concat(_toConsumableArray(state), [todo(undefined, action)]); | |
case 'TOGGLE_TODO': | |
return state.map(function (t) { | |
return todo(t, action); | |
}); | |
default: | |
return state; | |
} | |
}; | |
// visibilityFilter reducer | |
// handles actions for updating filters | |
var visibilityFilter = function visibilityFilter(state, action) { | |
if (state === undefined) state = 'SHOW_ALL'; | |
switch (action.type) { | |
case 'SET_VISIBILITY_FILTER': | |
return action.filter; | |
default: | |
return state; | |
} | |
}; | |
// import combineReducers from Redux | |
// this does the Reducer Composition for us | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
// use combineReducers to combine all reducers | |
// into a single top-level reducer called todoApp | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
// import createStore from Redux | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
// make the store for the app by | |
// calling createStore and passing | |
// the todoApp as the reducer | |
var store = createStore(todoApp); | |
// get the base class for all components from react | |
var _React = React; | |
var Component = _React.Component; | |
var nextTodoId = 0; | |
var TodoApp = (function (_Component) { | |
_inherits(TodoApp, _Component); | |
function TodoApp() { | |
_classCallCheck(this, TodoApp); | |
_get(Object.getPrototypeOf(TodoApp.prototype), 'constructor', this).apply(this, arguments); | |
} | |
_createClass(TodoApp, [{ | |
key: 'render', | |
value: function render() { | |
return React.createElement( | |
'div', | |
null, | |
React.createElement( | |
'button', | |
{ onClick: function () { | |
store.dispatch({ | |
type: 'ADD_TODO', | |
text: 'Test', | |
id: nextTodoId++ | |
}); | |
} }, | |
'Add Todo' | |
), | |
React.createElement( | |
'ul', | |
null, | |
this.props.todos.map(function (todo) { | |
return React.createElement( | |
'li', | |
{ key: todo.id }, | |
todo.text | |
); | |
}) | |
) | |
); | |
} | |
}]); | |
return TodoApp; | |
})(Component); | |
; | |
// update dom in response to the current app state | |
// the implementation of the render method | |
// will use react | |
var render = function render() { | |
ReactDOM.render(React.createElement(TodoApp, { todos: store.getState().todos }), document.getElementById('root')); | |
}; | |
render(); | |
// register render as a listener. | |
// this means that render will be | |
// called every time the store updates | |
// this happens every time an action | |
// is dispatched. | |
store.subscribe(render); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment