Last active
April 22, 2017 21:32
-
-
Save itsashis4u/2cab556ff74bef6fcbc2f1ce2ad6d788 to your computer and use it in GitHub Desktop.
Learning Redux and React-Redux | JS Bin// source https://jsbin.com/tuwoyim
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://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/redux/3.6.0/redux.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.4/react-redux.min.js"></script> | |
</head> | |
<body> | |
<div id="root"></div> | |
<script id="jsbin-javascript"> | |
//jshint esnext:true | |
'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; }; | |
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); } } | |
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 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; | |
} | |
}; | |
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 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; | |
}); | |
} | |
}; | |
var nextTodoId = 0; | |
var addTodo = function addTodo(text) { | |
return { | |
type: 'ADD_TODO', | |
text: text, | |
id: nextTodoId++ | |
}; | |
}; | |
var toggleTodo = function toggleTodo(id) { | |
return { | |
type: 'TOGGLE_TODO', | |
id: id | |
}; | |
}; | |
var setVisibilityFilter = function setVisibilityFilter(filter) { | |
return { | |
type: 'SET_VISIBILITY_FILTER', | |
filter: filter | |
}; | |
}; | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
var _React = React; | |
var Component = _React.Component; | |
var _ReactRedux = ReactRedux; | |
var connect = _ReactRedux.connect; | |
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 mapStateToLinkProps = function mapStateToLinkProps(state, ownProps) { | |
return { | |
active: ownProps.filter === state.visibilityFilter | |
}; | |
}; | |
var mapDispatchToLinkProps = function mapDispatchToLinkProps(dispatch, ownProps) { | |
return { | |
onClick: function onClick() { | |
dispatch(setVisibilityFilter(ownProps.filter)); | |
} | |
}; | |
}; | |
var FilterLink = connect(mapStateToLinkProps, mapDispatchToLinkProps)(Link); | |
var Todo = function Todo(_ref2) { | |
var text = _ref2.text; | |
var completed = _ref2.completed; | |
var onClickHandler = _ref2.onClickHandler; | |
return React.createElement( | |
'li', | |
{ | |
onClick: onClickHandler, | |
style: { textDecoration: completed ? 'line-through' : 'none', userSelect: '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, { | |
onClickHandler: 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(toggleTodo(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) { | |
return input = node; | |
} }), | |
React.createElement( | |
'button', | |
{ | |
onClick: function () { | |
if (!input.value) return false; | |
dispatch(addTodo(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' | |
) | |
); | |
}; | |
var TodoApp = function TodoApp() { | |
return React.createElement( | |
'div', | |
null, | |
React.createElement(AddTodo, null), | |
React.createElement(VisibleTodoList, null), | |
React.createElement(Footer, null) | |
); | |
}; | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
var _ReactRedux2 = ReactRedux; | |
var Provider = _ReactRedux2.Provider; | |
ReactDOM.render(React.createElement( | |
Provider, | |
{ store: createStore(todoApp) }, | |
React.createElement(TodoApp, null) | |
), document.getElementById('root')); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">//jshint esnext:true | |
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 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 visibilityFilter = ( | |
state = "SHOW_ALL", | |
action | |
) => { | |
switch (action.type) { | |
case 'SET_VISIBILITY_FILTER': | |
return action.filter; | |
default: | |
return state; | |
} | |
}; | |
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); | |
} | |
} | |
let nextTodoId = 0; | |
const addTodo = (text) => { | |
return { | |
type: 'ADD_TODO', | |
text, | |
id: nextTodoId++ | |
} | |
} | |
const toggleTodo = (id) => { | |
return { | |
type: 'TOGGLE_TODO', | |
id | |
}; | |
} | |
const setVisibilityFilter = (filter) => { | |
return { | |
type: 'SET_VISIBILITY_FILTER', | |
filter | |
} | |
} | |
const { combineReducers } = Redux; | |
const todoApp = combineReducers({ | |
todos, | |
visibilityFilter | |
}); | |
const { Component } = React; | |
const { connect } = ReactRedux; | |
const Link = ({ active, children, onClick }) => { | |
if (active) | |
return (<span>{children}</span>) | |
return ( | |
<a href="#" | |
onClick={e => { | |
e.preventDefault(); | |
onClick(); | |
}} | |
>{children}</a> | |
); | |
} | |
const mapStateToLinkProps = ( | |
state, | |
ownProps | |
) => { | |
return { | |
active: | |
ownProps.filter === state.visibilityFilter | |
}; | |
}; | |
const mapDispatchToLinkProps = ( | |
dispatch, | |
ownProps | |
) => { | |
return { | |
onClick: () => { | |
dispatch(setVisibilityFilter(ownProps.filter)); | |
} | |
}; | |
}; | |
const FilterLink = connect( | |
mapStateToLinkProps, | |
mapDispatchToLinkProps | |
)(Link); | |
const Todo = ({ text, completed, onClickHandler }) => { | |
return ( | |
<li | |
onClick={onClickHandler} | |
style={{textDecoration: | |
completed? | |
'line-through': | |
'none', userSelect: 'none'}} | |
> | |
{text} | |
</li> | |
); | |
}; | |
const TodoList = ({ todos, onTodoClick }) => { | |
return ( | |
<ul> | |
{ | |
todos.map(todo => | |
<Todo | |
key={todo.id} | |
{...todo} | |
onClickHandler={() => onTodoClick(todo.id)} | |
/>) | |
} | |
</ul> | |
); | |
}; | |
const mapStateToTodoListProps = (state) => { | |
return { | |
todos: getVisibleTodos( | |
state.todos, | |
state.visibilityFilter | |
) | |
}; | |
}; | |
const mapDispatchToTodoListProps = (dispatch) => { | |
return { | |
onTodoClick: (id) => { | |
dispatch(toggleTodo(id)); | |
} | |
}; | |
}; | |
const VisibleTodoList = connect( | |
mapStateToTodoListProps, | |
mapDispatchToTodoListProps | |
)(TodoList); | |
let AddTodo = ({ dispatch }) => { | |
let input; | |
return ( | |
<div> | |
<input ref={node => input = node}/> | |
<button | |
onClick={() => { | |
if(!input.value) return false; | |
dispatch(addTodo(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> | |
); | |
const TodoApp = () => ( | |
<div> | |
<AddTodo /> | |
<VisibleTodoList /> | |
<Footer /> | |
</div> | |
); | |
const { createStore } = Redux; | |
const { Provider } = ReactRedux; | |
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
//jshint esnext:true | |
'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; }; | |
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); } } | |
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 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; | |
} | |
}; | |
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 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; | |
}); | |
} | |
}; | |
var nextTodoId = 0; | |
var addTodo = function addTodo(text) { | |
return { | |
type: 'ADD_TODO', | |
text: text, | |
id: nextTodoId++ | |
}; | |
}; | |
var toggleTodo = function toggleTodo(id) { | |
return { | |
type: 'TOGGLE_TODO', | |
id: id | |
}; | |
}; | |
var setVisibilityFilter = function setVisibilityFilter(filter) { | |
return { | |
type: 'SET_VISIBILITY_FILTER', | |
filter: filter | |
}; | |
}; | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
var _React = React; | |
var Component = _React.Component; | |
var _ReactRedux = ReactRedux; | |
var connect = _ReactRedux.connect; | |
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 mapStateToLinkProps = function mapStateToLinkProps(state, ownProps) { | |
return { | |
active: ownProps.filter === state.visibilityFilter | |
}; | |
}; | |
var mapDispatchToLinkProps = function mapDispatchToLinkProps(dispatch, ownProps) { | |
return { | |
onClick: function onClick() { | |
dispatch(setVisibilityFilter(ownProps.filter)); | |
} | |
}; | |
}; | |
var FilterLink = connect(mapStateToLinkProps, mapDispatchToLinkProps)(Link); | |
var Todo = function Todo(_ref2) { | |
var text = _ref2.text; | |
var completed = _ref2.completed; | |
var onClickHandler = _ref2.onClickHandler; | |
return React.createElement( | |
'li', | |
{ | |
onClick: onClickHandler, | |
style: { textDecoration: completed ? 'line-through' : 'none', userSelect: '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, { | |
onClickHandler: 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(toggleTodo(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) { | |
return input = node; | |
} }), | |
React.createElement( | |
'button', | |
{ | |
onClick: function () { | |
if (!input.value) return false; | |
dispatch(addTodo(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' | |
) | |
); | |
}; | |
var TodoApp = function TodoApp() { | |
return React.createElement( | |
'div', | |
null, | |
React.createElement(AddTodo, null), | |
React.createElement(VisibleTodoList, null), | |
React.createElement(Footer, null) | |
); | |
}; | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
var _ReactRedux2 = ReactRedux; | |
var Provider = _ReactRedux2.Provider; | |
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