Created
December 3, 2019 01:12
-
-
Save raydot/bc85b386bf2d567d83bb488c2dbfdcd3 to your computer and use it in GitHub Desktop.
Redux Tutorial Video 19 // source https://jsbin.com/neseqom
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 name="description" content="Video 19"> | |
<meta charset="utf-8"> | |
<title>Redux Tutorial</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.4/redux.min.js"></script> | |
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> | |
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> | |
</head> | |
<body> | |
<div id='root'></div> | |
<script id="jsbin-javascript"> | |
// Adding the view | |
'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 | |
var todos = function todos(state, action) { | |
if (state === undefined) state = []; | |
switch (action.type) { | |
case 'ADD_TODO': | |
return [].concat(_toConsumableArray(state), [// return array with all items + new | |
todo(undefined, action) // calls child reducers | |
]); | |
case 'TOGGLE_TODO': | |
return state.map(function (t) { | |
return todo(t, action); | |
}); | |
default: | |
return state; | |
} | |
}; | |
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; | |
} | |
}; | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
// This is the root reducer | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
// combined reducer | |
var store = createStore(todoApp); | |
var _React = React; | |
var Component = _React.Component; | |
// react component for utilizing visibility filter | |
var FilterLink = function FilterLink(_ref) { | |
var filter = _ref.filter; | |
var currentFilter = _ref.currentFilter; | |
var children = _ref.children; | |
if (filter === currentFilter) { | |
return React.createElement( | |
'span', | |
null, | |
children | |
); | |
} | |
return React.createElement( | |
'a', | |
{ href: '#', | |
onClick: function (e) { | |
e.preventDefault(); | |
store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: filter | |
}); | |
} | |
}, | |
children | |
); | |
}; | |
var getVisibleTodos = function getVisibleTodos(todos, filter) { | |
switch (filter) { | |
case 'SHOW_ALL': | |
return todos; | |
case 'SHOW_COMPLETED': | |
return todos.filter(function (t) { | |
return t.completed; | |
}); | |
case 'SHOW_ACTIVE': | |
return todos.filter(function (t) { | |
return !t.completed; | |
}); | |
} | |
}; | |
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() { | |
var _this = this; | |
var _props = this.props; | |
var // destructure from the props | |
todos = _props.todos; | |
var visibilityFilter = _props.visibilityFilter; | |
var visibleTodos = getVisibleTodos(todos, visibilityFilter); | |
return React.createElement( | |
'div', | |
null, | |
React.createElement('input', { ref: function (node) { | |
_this.input = node; | |
} }), | |
React.createElement( | |
'button', | |
{ onClick: function () { | |
store.dispatch({ // initiate state change | |
type: 'ADD_TODO', | |
text: _this.input.value, | |
id: nextTodoId++ | |
}); | |
_this.input.value = ''; | |
} }, | |
'Add Todo' | |
), | |
React.createElement( | |
'ul', | |
null, | |
visibleTodos.map(function (todo) { | |
return React.createElement( | |
'li', | |
{ key: todo.id, | |
onClick: function () { | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: todo.id // id of todo being rendered | |
}); | |
}, | |
style: { | |
textDecoration: todo.completed ? 'line-through' : 'none' | |
} }, | |
todo.id, | |
': ', | |
todo.text | |
); | |
}) | |
), | |
React.createElement( | |
'p', | |
null, | |
'Show:', | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ALL', | |
currentFilter: visibilityFilter }, | |
'All' | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ACTIVE', | |
currentFilter: visibilityFilter }, | |
'Active' | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_COMPLETED', | |
currentFilter: visibilityFilter }, | |
'Completed' | |
) | |
) | |
); | |
} | |
}]); | |
return TodoApp; | |
})(Component); | |
var render = function render() { | |
ReactDOM.render( | |
// passes to component as prop, every state filled in inside the state object. | |
React.createElement(TodoApp, store.getState()), document.getElementById('root')); | |
}; | |
store.subscribe(render); // runs on any state change | |
render(); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">// Adding the view | |
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 | |
const todos = (state = [], action) => { | |
switch (action.type) { | |
case 'ADD_TODO': | |
return [ | |
...state, // return array with all items + new | |
todo(undefined, action) // calls child reducers | |
] | |
case 'TOGGLE_TODO': | |
return state.map(t => todo(t, action)) | |
default: | |
return state; | |
} | |
}; | |
const visibilityFilter = ( | |
state = 'SHOW_ALL', | |
action | |
) => { | |
switch (action.type) { | |
case 'SET_VISIBILITY_FILTER': | |
return action.filter; | |
default: | |
return state; | |
} | |
} | |
const { combineReducers } = Redux | |
// This is the root reducer | |
const todoApp = combineReducers({ | |
todos, | |
visibilityFilter | |
}) | |
const { createStore } = Redux | |
// combined reducer | |
const store = createStore(todoApp) | |
const { Component } = React | |
// react component for utilizing visibility filter | |
const FilterLink = ({ | |
filter, | |
currentFilter, | |
children | |
}) => { | |
if (filter === currentFilter) { | |
return <span>{children}</span>; | |
} | |
return ( | |
<a href='#' | |
onClick={e => { | |
e.preventDefault(); | |
store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter | |
}); | |
}} | |
> | |
{children} | |
</a> | |
) | |
} | |
const getVisibleTodos = ( | |
todos, | |
filter | |
) => { | |
switch (filter) { | |
case 'SHOW_ALL': | |
return todos; | |
case 'SHOW_COMPLETED': | |
return todos.filter( | |
t => t.completed | |
); | |
case 'SHOW_ACTIVE': | |
return todos.filter( | |
t => !t.completed | |
); | |
} | |
} | |
let nextTodoId = 0; | |
class TodoApp extends Component { | |
render() { | |
const { // destructure from the props | |
todos, | |
visibilityFilter | |
} = this.props; | |
const visibleTodos = getVisibleTodos( | |
todos, | |
visibilityFilter | |
); | |
return ( | |
<div> | |
<input ref={node => { | |
this.input = node | |
}} /> | |
<button onClick = {() => { | |
store.dispatch({ // initiate state change | |
type: 'ADD_TODO', | |
text: this.input.value, | |
id: nextTodoId++ | |
}) | |
this.input.value='' | |
}}> | |
Add Todo | |
</button> | |
<ul> | |
{visibleTodos.map(todo => | |
<li key={todo.id} | |
onClick={() => { | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: todo.id // id of todo being rendered | |
}); | |
}} | |
style={{ | |
textDecoration: | |
todo.completed ? | |
'line-through' : | |
'none' | |
}}> | |
{todo.id}: {todo.text} | |
</li> | |
)} | |
</ul> | |
<p> | |
Show: | |
{' '} | |
<FilterLink | |
filter='SHOW_ALL' | |
currentFilter={visibilityFilter}> | |
All | |
</FilterLink> | |
{' '} | |
<FilterLink | |
filter='SHOW_ACTIVE' | |
currentFilter={visibilityFilter}> | |
Active | |
</FilterLink> | |
{' '} | |
<FilterLink | |
filter='SHOW_COMPLETED' | |
currentFilter={visibilityFilter}> | |
Completed | |
</FilterLink> | |
</p> | |
</div> | |
); | |
} | |
} | |
const render = () => { | |
ReactDOM.render( | |
// passes to component as prop, every state filled in inside the state object. | |
<TodoApp | |
{...store.getState()} | |
/>, | |
document.getElementById('root') | |
) | |
} | |
store.subscribe(render) // runs on any state change | |
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
// Adding the view | |
'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 | |
var todos = function todos(state, action) { | |
if (state === undefined) state = []; | |
switch (action.type) { | |
case 'ADD_TODO': | |
return [].concat(_toConsumableArray(state), [// return array with all items + new | |
todo(undefined, action) // calls child reducers | |
]); | |
case 'TOGGLE_TODO': | |
return state.map(function (t) { | |
return todo(t, action); | |
}); | |
default: | |
return state; | |
} | |
}; | |
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; | |
} | |
}; | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
// This is the root reducer | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
// combined reducer | |
var store = createStore(todoApp); | |
var _React = React; | |
var Component = _React.Component; | |
// react component for utilizing visibility filter | |
var FilterLink = function FilterLink(_ref) { | |
var filter = _ref.filter; | |
var currentFilter = _ref.currentFilter; | |
var children = _ref.children; | |
if (filter === currentFilter) { | |
return React.createElement( | |
'span', | |
null, | |
children | |
); | |
} | |
return React.createElement( | |
'a', | |
{ href: '#', | |
onClick: function (e) { | |
e.preventDefault(); | |
store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: filter | |
}); | |
} | |
}, | |
children | |
); | |
}; | |
var getVisibleTodos = function getVisibleTodos(todos, filter) { | |
switch (filter) { | |
case 'SHOW_ALL': | |
return todos; | |
case 'SHOW_COMPLETED': | |
return todos.filter(function (t) { | |
return t.completed; | |
}); | |
case 'SHOW_ACTIVE': | |
return todos.filter(function (t) { | |
return !t.completed; | |
}); | |
} | |
}; | |
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() { | |
var _this = this; | |
var _props = this.props; | |
var // destructure from the props | |
todos = _props.todos; | |
var visibilityFilter = _props.visibilityFilter; | |
var visibleTodos = getVisibleTodos(todos, visibilityFilter); | |
return React.createElement( | |
'div', | |
null, | |
React.createElement('input', { ref: function (node) { | |
_this.input = node; | |
} }), | |
React.createElement( | |
'button', | |
{ onClick: function () { | |
store.dispatch({ // initiate state change | |
type: 'ADD_TODO', | |
text: _this.input.value, | |
id: nextTodoId++ | |
}); | |
_this.input.value = ''; | |
} }, | |
'Add Todo' | |
), | |
React.createElement( | |
'ul', | |
null, | |
visibleTodos.map(function (todo) { | |
return React.createElement( | |
'li', | |
{ key: todo.id, | |
onClick: function () { | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: todo.id // id of todo being rendered | |
}); | |
}, | |
style: { | |
textDecoration: todo.completed ? 'line-through' : 'none' | |
} }, | |
todo.id, | |
': ', | |
todo.text | |
); | |
}) | |
), | |
React.createElement( | |
'p', | |
null, | |
'Show:', | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ALL', | |
currentFilter: visibilityFilter }, | |
'All' | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ACTIVE', | |
currentFilter: visibilityFilter }, | |
'Active' | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_COMPLETED', | |
currentFilter: visibilityFilter }, | |
'Completed' | |
) | |
) | |
); | |
} | |
}]); | |
return TodoApp; | |
})(Component); | |
var render = function render() { | |
ReactDOM.render( | |
// passes to component as prop, every state filled in inside the state object. | |
React.createElement(TodoApp, store.getState()), document.getElementById('root')); | |
}; | |
store.subscribe(render); // runs on any state change | |
render(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment