Created
July 19, 2017 07:24
-
-
Save ryanivandsouza/896f5db245950ce2b7fa1c025ed12f2a to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/bolape
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>JS Bin</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script> | |
<script src="https://fb.me/react-15.1.0.js"></script> | |
<script src="https://fb.me/react-dom-15.1.0.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.5/react-redux.min.js"></script> | |
</head> | |
<body> | |
<div id="root"> | |
</div> | |
<script id="jsbin-javascript"> | |
'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) { | |
if (state === undefined) state = {}; | |
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; | |
} | |
}; | |
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; | |
} | |
}; | |
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; | |
/* | |
const combineReducers = (reducers) => { | |
return (state = {}, action) => { | |
return Object.keys(reducers).reduce((acc, key) => { | |
return Object.assign( | |
{}, | |
acc, | |
{ | |
key: reducers[key](state[key], action) | |
} | |
) | |
}, {}) | |
} | |
} | |
*/ | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
/* | |
const todoApp = (state = {}, action) => { | |
return { | |
todos: todos( | |
state.todos, | |
action), | |
visibilityFilter: visibilityFilter( | |
state.visibilityFilter, | |
action) | |
} | |
} | |
*/ | |
//const store = createStore(todos) | |
/* | |
console.log('Initial state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching ADD_TODO') | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 0, | |
text: 'Learn Redux' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching ADD_TODO') | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 1, | |
text: 'Go shopping' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching TOGGLE_TODO') | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: 0 | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching SET_VISIBILITY_FILTER') | |
store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: 'SHOW_COMPLETED' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
*/ | |
var _React = React; | |
var Component = _React.Component; | |
var Link = function Link(_ref) { | |
var active = _ref.active; | |
var children = _ref.children; | |
var onClick = _ref.onClick; | |
if (active) { | |
return React.createElement( | |
'span', | |
null, | |
children | |
); | |
} | |
return React.createElement( | |
'a', | |
{ href: '#', | |
onClick: function (e) { | |
e.preventDefault(); | |
onClick(); | |
} | |
}, | |
children | |
); | |
}; | |
var _ReactRedux = ReactRedux; | |
var connect = _ReactRedux.connect; | |
/* | |
class VisibleTodoList extends Component { | |
componentDidMount() { | |
const { store } = this.context | |
this.unsubscribe = store.subscribe(() => | |
this.forceUpdate() | |
) | |
} | |
componentWillUnmount() { | |
this.unsubscribe() | |
} | |
render() { | |
const props = this.props | |
const { store } = this.context | |
const state = store.getState() | |
return ( | |
<TodoList | |
todos={ | |
} | |
onTodoClick={ | |
} | |
> | |
</TodoList> | |
) | |
} | |
} | |
VisibleTodoList.contextTypes = { | |
store: React.PropTypes.object | |
} | |
*/ | |
var mapStateToLinkProps = function mapStateToLinkProps(state, ownProps) { | |
return { | |
active: ownProps.filter === state.visibilityFilter | |
}; | |
}; | |
var mapDispatchToLinkProps = function mapDispatchToLinkProps(dispatch, ownProps) { | |
return { | |
onClick: function onClick() { | |
dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: ownProps.filter | |
}); | |
} | |
}; | |
}; | |
var FilterLink = connect(mapStateToLinkProps, mapDispatchToLinkProps)(Link); | |
/* | |
class FilterLink extends Component { | |
componentDidMount() { | |
const { store } = this.context | |
this.unsubscribe = store.subscribe(() => | |
this.forceUpdate() | |
) | |
} | |
componentWillUnmount() { | |
this.unsubscribe() | |
} | |
render() { | |
const props = this.props | |
const { store } = this.context | |
const state = store.getState() | |
return ( | |
<Link | |
active={ | |
props.filter === state.visibilityFilter | |
} | |
onClick={() => | |
store.) | |
} | |
> | |
{props.children} | |
</Link> | |
) | |
} | |
} | |
FilterLink.contextTypes = { | |
store: React.PropTypes.object | |
} | |
*/ | |
var getVisibleTodos = function getVisibleTodos(todos, filter) { | |
switch (filter) { | |
case 'SHOW_ALL': | |
return todos; | |
case 'SHOW_ACTIVE': | |
return todos.filter(function (todo) { | |
return !todo.completed; | |
}); | |
case 'SHOW_COMPLETED': | |
return todos.filter(function (todo) { | |
return todo.completed; | |
}); | |
default: | |
return todos; | |
} | |
}; | |
var Todo = function Todo(_ref2) { | |
var onClick = _ref2.onClick; | |
var completed = _ref2.completed; | |
var text = _ref2.text; | |
return React.createElement( | |
'li', | |
{ | |
onClick: onClick, | |
style: { | |
textDecoration: completed ? 'line-through' : 'none' | |
} | |
}, | |
text | |
); | |
}; | |
var TodoList = function TodoList(_ref3) { | |
var todos = _ref3.todos; | |
var onTodoClick = _ref3.onTodoClick; | |
return React.createElement( | |
'ul', | |
null, | |
todos.map(function (todo) { | |
return React.createElement(Todo, _extends({ | |
key: todo.id | |
}, todo, { | |
onClick: function () { | |
return onTodoClick(todo.id); | |
} | |
})); | |
}) | |
); | |
}; | |
var mapStateToTodoListProps = function mapStateToTodoListProps(state) { | |
return { | |
todos: getVisibleTodos(state.todos, state.visibilityFilter) | |
}; | |
}; | |
var mapDispatchToTodoListProps = function mapDispatchToTodoListProps(dispatch) { | |
return { | |
onTodoClick: function onTodoClick(id) { | |
dispatch({ | |
type: 'TOGGLE_TODO', | |
id: id | |
}); | |
} | |
}; | |
}; | |
var VisibleTodoList = connect(mapStateToTodoListProps, mapDispatchToTodoListProps)(TodoList); | |
var AddTodo = function AddTodo(_ref4) { | |
var dispatch = _ref4.dispatch; | |
var input = undefined; | |
return React.createElement( | |
'div', | |
null, | |
React.createElement('input', { ref: function (node) { | |
input = node; | |
} | |
}), | |
React.createElement( | |
'button', | |
{ | |
onClick: function () { | |
dispatch({ | |
type: 'ADD_TODO', | |
id: nextTodoId++, | |
text: input.value | |
}); | |
input.value = ''; | |
} | |
}, | |
'Add Todo' | |
) | |
); | |
}; | |
AddTodo = connect()(AddTodo); | |
var Footer = function Footer() { | |
return React.createElement( | |
'p', | |
null, | |
'Show:', | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ALL' | |
}, | |
'All' | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ACTIVE' | |
}, | |
'Active' | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_COMPLETED' | |
}, | |
'Completed' | |
) | |
); | |
}; | |
Footer.contextTypes = { | |
store: React.PropTypes.object | |
}; | |
var nextTodoId = 0; | |
var TodoApp = function TodoApp() { | |
return React.createElement( | |
'div', | |
null, | |
React.createElement(AddTodo, null), | |
React.createElement(VisibleTodoList, null), | |
React.createElement(Footer, null) | |
); | |
}; | |
var Provider = (function (_Component) { | |
_inherits(Provider, _Component); | |
function Provider() { | |
_classCallCheck(this, Provider); | |
_get(Object.getPrototypeOf(Provider.prototype), 'constructor', this).apply(this, arguments); | |
} | |
_createClass(Provider, [{ | |
key: 'getChildContext', | |
value: function getChildContext() { | |
return { | |
store: this.props.store | |
}; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
return this.props.children; | |
} | |
}]); | |
return Provider; | |
})(Component); | |
Provider.childContextTypes = { | |
store: React.PropTypes.object | |
}; | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
ReactDOM.render(React.createElement( | |
Provider, | |
{ store: createStore(todoApp) }, | |
React.createElement(TodoApp, null) | |
), document.getElementById('root')); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">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 | |
} | |
} | |
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 | |
} | |
} | |
const visibilityFilter = (state = 'SHOW_ALL', action) => { | |
switch(action.type) { | |
case 'SET_VISIBILITY_FILTER': | |
return action.filter | |
default: | |
return state | |
} | |
} | |
const { combineReducers } = Redux | |
/* | |
const combineReducers = (reducers) => { | |
return (state = {}, action) => { | |
return Object.keys(reducers).reduce((acc, key) => { | |
return Object.assign( | |
{}, | |
acc, | |
{ | |
key: reducers[key](state[key], action) | |
} | |
) | |
}, {}) | |
} | |
} | |
*/ | |
const todoApp = combineReducers({ | |
todos, | |
visibilityFilter | |
}) | |
/* | |
const todoApp = (state = {}, action) => { | |
return { | |
todos: todos( | |
state.todos, | |
action), | |
visibilityFilter: visibilityFilter( | |
state.visibilityFilter, | |
action) | |
} | |
} | |
*/ | |
//const store = createStore(todos) | |
/* | |
console.log('Initial state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching ADD_TODO') | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 0, | |
text: 'Learn Redux' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching ADD_TODO') | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 1, | |
text: 'Go shopping' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching TOGGLE_TODO') | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: 0 | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching SET_VISIBILITY_FILTER') | |
store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: 'SHOW_COMPLETED' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
*/ | |
const { Component } = React | |
const Link = ({ | |
active, | |
children, | |
onClick | |
}) => { | |
if(active) { | |
return <span>{children}</span> | |
} | |
return ( | |
<a href='#' | |
onClick={e => { | |
e.preventDefault() | |
onClick() | |
}} | |
> | |
{children} | |
</a> | |
) | |
} | |
const { connect } = ReactRedux | |
/* | |
class VisibleTodoList extends Component { | |
componentDidMount() { | |
const { store } = this.context | |
this.unsubscribe = store.subscribe(() => | |
this.forceUpdate() | |
) | |
} | |
componentWillUnmount() { | |
this.unsubscribe() | |
} | |
render() { | |
const props = this.props | |
const { store } = this.context | |
const state = store.getState() | |
return ( | |
<TodoList | |
todos={ | |
} | |
onTodoClick={ | |
} | |
> | |
</TodoList> | |
) | |
} | |
} | |
VisibleTodoList.contextTypes = { | |
store: React.PropTypes.object | |
} | |
*/ | |
const mapStateToLinkProps = ( | |
state, | |
ownProps | |
) => { | |
return { | |
active: | |
ownProps.filter === state.visibilityFilter | |
} | |
} | |
const mapDispatchToLinkProps = ( | |
dispatch, | |
ownProps | |
) => { | |
return { | |
onClick: () => { | |
dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: ownProps.filter | |
}) | |
} | |
} | |
} | |
const FilterLink = connect( | |
mapStateToLinkProps, | |
mapDispatchToLinkProps | |
)(Link) | |
/* | |
class FilterLink extends Component { | |
componentDidMount() { | |
const { store } = this.context | |
this.unsubscribe = store.subscribe(() => | |
this.forceUpdate() | |
) | |
} | |
componentWillUnmount() { | |
this.unsubscribe() | |
} | |
render() { | |
const props = this.props | |
const { store } = this.context | |
const state = store.getState() | |
return ( | |
<Link | |
active={ | |
props.filter === state.visibilityFilter | |
} | |
onClick={() => | |
store.) | |
} | |
> | |
{props.children} | |
</Link> | |
) | |
} | |
} | |
FilterLink.contextTypes = { | |
store: React.PropTypes.object | |
} | |
*/ | |
const getVisibleTodos = ( | |
todos, | |
filter | |
) => { | |
switch(filter) { | |
case 'SHOW_ALL': | |
return todos | |
case 'SHOW_ACTIVE': | |
return todos.filter(todo => !todo.completed) | |
case 'SHOW_COMPLETED': | |
return todos.filter(todo => todo.completed) | |
default: | |
return todos | |
} | |
} | |
const Todo = ({ | |
onClick, | |
completed, | |
text | |
}) => ( | |
<li | |
onClick={onClick} | |
style={{ | |
textDecoration: | |
completed ? | |
'line-through' : | |
'none' | |
}} | |
> | |
{text} | |
</li> | |
) | |
const TodoList = ({ | |
todos, | |
onTodoClick | |
}) => ( | |
<ul> | |
{todos.map(todo => | |
<Todo | |
key={todo.id} | |
{...todo} | |
onClick={() => onTodoClick(todo.id)} | |
> | |
</Todo> | |
)} | |
</ul> | |
) | |
const mapStateToTodoListProps = (state) => { | |
return { | |
todos: getVisibleTodos( | |
state.todos, | |
state.visibilityFilter | |
) | |
} | |
} | |
const mapDispatchToTodoListProps = (dispatch) => { | |
return { | |
onTodoClick: (id) => { | |
dispatch({ | |
type: 'TOGGLE_TODO', | |
id: id | |
}) | |
} | |
} | |
} | |
const VisibleTodoList = connect( | |
mapStateToTodoListProps, | |
mapDispatchToTodoListProps | |
)(TodoList) | |
let AddTodo = ({ dispatch }) => { | |
let input | |
return ( | |
<div> | |
<input ref={node => { | |
input = node | |
}} | |
/> | |
<button | |
onClick={() => { | |
dispatch({ | |
type: 'ADD_TODO', | |
id: nextTodoId++, | |
text: input.value | |
}) | |
input.value = '' | |
}} | |
> | |
Add Todo | |
</button> | |
</div> | |
) | |
} | |
AddTodo = connect()(AddTodo) | |
const Footer = () => ( | |
<p> | |
Show: | |
{' '} | |
<FilterLink | |
filter='SHOW_ALL' | |
> | |
All | |
</FilterLink> | |
{' '} | |
<FilterLink | |
filter='SHOW_ACTIVE' | |
> | |
Active | |
</FilterLink> | |
{' '} | |
<FilterLink | |
filter='SHOW_COMPLETED' | |
> | |
Completed | |
</FilterLink> | |
</p> | |
) | |
Footer.contextTypes = { | |
store: React.PropTypes.object | |
} | |
let nextTodoId = 0 | |
const TodoApp = () => ( | |
<div> | |
<AddTodo /> | |
<VisibleTodoList /> | |
<Footer /> | |
</div> | |
) | |
class Provider extends Component { | |
getChildContext() { | |
return { | |
store: this.props.store | |
} | |
} | |
render() { | |
return this.props.children | |
} | |
} | |
Provider.childContextTypes = { | |
store: React.PropTypes.object | |
} | |
const { createStore } = Redux | |
ReactDOM.render( | |
<Provider store={createStore(todoApp)}> | |
<TodoApp /> | |
</ Provider>, | |
document.getElementById('root') | |
)</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
'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) { | |
if (state === undefined) state = {}; | |
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; | |
} | |
}; | |
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; | |
} | |
}; | |
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; | |
/* | |
const combineReducers = (reducers) => { | |
return (state = {}, action) => { | |
return Object.keys(reducers).reduce((acc, key) => { | |
return Object.assign( | |
{}, | |
acc, | |
{ | |
key: reducers[key](state[key], action) | |
} | |
) | |
}, {}) | |
} | |
} | |
*/ | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
/* | |
const todoApp = (state = {}, action) => { | |
return { | |
todos: todos( | |
state.todos, | |
action), | |
visibilityFilter: visibilityFilter( | |
state.visibilityFilter, | |
action) | |
} | |
} | |
*/ | |
//const store = createStore(todos) | |
/* | |
console.log('Initial state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching ADD_TODO') | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 0, | |
text: 'Learn Redux' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching ADD_TODO') | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: 1, | |
text: 'Go shopping' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching TOGGLE_TODO') | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: 0 | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
console.log('Dispatching SET_VISIBILITY_FILTER') | |
store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: 'SHOW_COMPLETED' | |
}) | |
console.log('Current state:') | |
console.log(store.getState()) | |
console.log('--------------') | |
*/ | |
var _React = React; | |
var Component = _React.Component; | |
var Link = function Link(_ref) { | |
var active = _ref.active; | |
var children = _ref.children; | |
var onClick = _ref.onClick; | |
if (active) { | |
return React.createElement( | |
'span', | |
null, | |
children | |
); | |
} | |
return React.createElement( | |
'a', | |
{ href: '#', | |
onClick: function (e) { | |
e.preventDefault(); | |
onClick(); | |
} | |
}, | |
children | |
); | |
}; | |
var _ReactRedux = ReactRedux; | |
var connect = _ReactRedux.connect; | |
/* | |
class VisibleTodoList extends Component { | |
componentDidMount() { | |
const { store } = this.context | |
this.unsubscribe = store.subscribe(() => | |
this.forceUpdate() | |
) | |
} | |
componentWillUnmount() { | |
this.unsubscribe() | |
} | |
render() { | |
const props = this.props | |
const { store } = this.context | |
const state = store.getState() | |
return ( | |
<TodoList | |
todos={ | |
} | |
onTodoClick={ | |
} | |
> | |
</TodoList> | |
) | |
} | |
} | |
VisibleTodoList.contextTypes = { | |
store: React.PropTypes.object | |
} | |
*/ | |
var mapStateToLinkProps = function mapStateToLinkProps(state, ownProps) { | |
return { | |
active: ownProps.filter === state.visibilityFilter | |
}; | |
}; | |
var mapDispatchToLinkProps = function mapDispatchToLinkProps(dispatch, ownProps) { | |
return { | |
onClick: function onClick() { | |
dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: ownProps.filter | |
}); | |
} | |
}; | |
}; | |
var FilterLink = connect(mapStateToLinkProps, mapDispatchToLinkProps)(Link); | |
/* | |
class FilterLink extends Component { | |
componentDidMount() { | |
const { store } = this.context | |
this.unsubscribe = store.subscribe(() => | |
this.forceUpdate() | |
) | |
} | |
componentWillUnmount() { | |
this.unsubscribe() | |
} | |
render() { | |
const props = this.props | |
const { store } = this.context | |
const state = store.getState() | |
return ( | |
<Link | |
active={ | |
props.filter === state.visibilityFilter | |
} | |
onClick={() => | |
store.) | |
} | |
> | |
{props.children} | |
</Link> | |
) | |
} | |
} | |
FilterLink.contextTypes = { | |
store: React.PropTypes.object | |
} | |
*/ | |
var getVisibleTodos = function getVisibleTodos(todos, filter) { | |
switch (filter) { | |
case 'SHOW_ALL': | |
return todos; | |
case 'SHOW_ACTIVE': | |
return todos.filter(function (todo) { | |
return !todo.completed; | |
}); | |
case 'SHOW_COMPLETED': | |
return todos.filter(function (todo) { | |
return todo.completed; | |
}); | |
default: | |
return todos; | |
} | |
}; | |
var Todo = function Todo(_ref2) { | |
var onClick = _ref2.onClick; | |
var completed = _ref2.completed; | |
var text = _ref2.text; | |
return React.createElement( | |
'li', | |
{ | |
onClick: onClick, | |
style: { | |
textDecoration: completed ? 'line-through' : 'none' | |
} | |
}, | |
text | |
); | |
}; | |
var TodoList = function TodoList(_ref3) { | |
var todos = _ref3.todos; | |
var onTodoClick = _ref3.onTodoClick; | |
return React.createElement( | |
'ul', | |
null, | |
todos.map(function (todo) { | |
return React.createElement(Todo, _extends({ | |
key: todo.id | |
}, todo, { | |
onClick: function () { | |
return onTodoClick(todo.id); | |
} | |
})); | |
}) | |
); | |
}; | |
var mapStateToTodoListProps = function mapStateToTodoListProps(state) { | |
return { | |
todos: getVisibleTodos(state.todos, state.visibilityFilter) | |
}; | |
}; | |
var mapDispatchToTodoListProps = function mapDispatchToTodoListProps(dispatch) { | |
return { | |
onTodoClick: function onTodoClick(id) { | |
dispatch({ | |
type: 'TOGGLE_TODO', | |
id: id | |
}); | |
} | |
}; | |
}; | |
var VisibleTodoList = connect(mapStateToTodoListProps, mapDispatchToTodoListProps)(TodoList); | |
var AddTodo = function AddTodo(_ref4) { | |
var dispatch = _ref4.dispatch; | |
var input = undefined; | |
return React.createElement( | |
'div', | |
null, | |
React.createElement('input', { ref: function (node) { | |
input = node; | |
} | |
}), | |
React.createElement( | |
'button', | |
{ | |
onClick: function () { | |
dispatch({ | |
type: 'ADD_TODO', | |
id: nextTodoId++, | |
text: input.value | |
}); | |
input.value = ''; | |
} | |
}, | |
'Add Todo' | |
) | |
); | |
}; | |
AddTodo = connect()(AddTodo); | |
var Footer = function Footer() { | |
return React.createElement( | |
'p', | |
null, | |
'Show:', | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ALL' | |
}, | |
'All' | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ACTIVE' | |
}, | |
'Active' | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_COMPLETED' | |
}, | |
'Completed' | |
) | |
); | |
}; | |
Footer.contextTypes = { | |
store: React.PropTypes.object | |
}; | |
var nextTodoId = 0; | |
var TodoApp = function TodoApp() { | |
return React.createElement( | |
'div', | |
null, | |
React.createElement(AddTodo, null), | |
React.createElement(VisibleTodoList, null), | |
React.createElement(Footer, null) | |
); | |
}; | |
var Provider = (function (_Component) { | |
_inherits(Provider, _Component); | |
function Provider() { | |
_classCallCheck(this, Provider); | |
_get(Object.getPrototypeOf(Provider.prototype), 'constructor', this).apply(this, arguments); | |
} | |
_createClass(Provider, [{ | |
key: 'getChildContext', | |
value: function getChildContext() { | |
return { | |
store: this.props.store | |
}; | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
return this.props.children; | |
} | |
}]); | |
return Provider; | |
})(Component); | |
Provider.childContextTypes = { | |
store: React.PropTypes.object | |
}; | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
ReactDOM.render(React.createElement( | |
Provider, | |
{ store: createStore(todoApp) }, | |
React.createElement(TodoApp, null) | |
), document.getElementById('root')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment