Created
June 15, 2017 20:25
-
-
Save KentaKudo/27c16323f4cb3fb2e8bb4a34512a4589 to your computer and use it in GitHub Desktop.
work log for: https://egghead.io/courses/getting-started-with-redux
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
const { combineReducers } = Redux; | |
const todoApp = combineReducers({ | |
todos, | |
visibilityFilter | |
}); | |
let nextTodoId = 0; | |
const addTodo = (text) => { | |
return { | |
type: 'ADD_TODO', | |
id: nextTodoId++, | |
text | |
}; | |
}; | |
const setVisibilityFilter = (filter) => { | |
return { | |
type: 'SET_VISIBILITY_FILTER', | |
filter: props.filter | |
}; | |
}; | |
const toggleTodo = (id) => { | |
return { | |
type: 'TOGGLE_TODO', | |
id | |
}; | |
}; | |
const { Component } = React; | |
const { Provider, connect } = ReactRedux; | |
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 Link = ({ | |
active, | |
children, | |
onClick | |
}) => { | |
if (active) { | |
return <span>{children}</span>; | |
} | |
return ( | |
<a | |
href='#' | |
onClick={e => { | |
e.prevendDefault(); | |
onClick(); | |
}} | |
> | |
{children} | |
</a> | |
); | |
}; | |
const mapStateToLinkProps = ( | |
state, | |
ownProps | |
) => { | |
return { | |
active: props.filter === state.visibilityFilter | |
}; | |
}; | |
const mapDispatchToLinkProps = ( | |
dispatch, | |
ownProps | |
) => { | |
onClick: () => { | |
dispatch( | |
setVisibilityFilter(ownProps.filter) | |
); | |
}; | |
}; | |
const FilterLink = connect( | |
mapStateToLinkProps, | |
mapDispatchToLinkProps | |
)(Link); | |
const Footer = () => ( | |
<p> | |
Show: | |
{' '} | |
<FilterLink filter='SHOW_ALL'> | |
All | |
</FilterLink> | |
{', '} | |
<FilterLink filter='SHOW_ACTIVE'> | |
Active | |
</FilterLink> | |
{', '} | |
<FilterLink filter='SHOW_COMPLETED'> | |
Completed | |
</FilterLink> | |
</p> | |
); | |
const Todo = ({ | |
onClick, | |
completed, | |
text | |
}) => ( | |
<li | |
onClick={onClick} | |
style={{ | |
textDecoratoin: | |
completed ? | |
'line-through' : | |
'none' | |
}} | |
> | |
{text} | |
</li> | |
); | |
const TodoList = ({ | |
todos, | |
onTodoClick | |
}) => ( | |
<ul> | |
{todos.map(todo => | |
<Todo | |
key={todo.id} | |
{...todo} | |
onClick={() => onTodoClick(todo.id)} | |
/> | |
)} | |
</ul> | |
); | |
let AddTodo = ({ dispatch }) => { | |
let input; | |
return ( | |
<div> | |
<input ref={node => { | |
input = node; | |
}} /> | |
<button onClick={() => { | |
dispatch(addTodo(input.value)) | |
input.value = ''; | |
}}> | |
Add Todo | |
</button> | |
</div> | |
); | |
}; | |
AddTodo = connect()(AddTodo); | |
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 | |
); | |
} | |
}; | |
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); | |
class TodoApp = () => ( | |
<div> | |
<AddTodo /> | |
<VisibleTodoList /> | |
<Footer /> | |
</div> | |
); | |
const { createStore } = Redux; | |
ReactDOM.render( | |
<Provider store={createStore(todoApp)}> | |
<TodoApp /> | |
</Provider>, | |
document.getElementById('root') | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment