@@ -52,11 +38,30 @@ class TodoList extends Component {
{todos}
- {todo}
New Todo
)
}
}
-export default TodoList;
\ No newline at end of file
+const mapStateToProps = state => {
+ return {
+ storedTodos: state.td.todos
+ };
+};
+
+const mapDispatchToprops = dispatch => {
+ return {
+ onToggleTodo: (id) => {
+ dispatch(actionCreators.toggleTodo(id));
+ },
+ onDeleteTodo: (id) => {
+ dispatch(actionCreators.deleteTodo(id));
+ },
+ onGetAll: () => {
+ dispatch(actionCreators.getTodos());
+ }
+ };
+}
+
+export default connect(mapStateToProps, mapDispatchToprops)(withRouter(TodoList));
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 87d1be5..1e92292 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,8 +3,16 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
+import { Provider } from 'react-redux';
+import { createStore, combineReducers, applyMiddleware } from 'redux'
+import thunk from 'redux-thunk';
+import todoReducer from './store/reducers/todo';
+const rootReducer = combineReducers({
+ td: todoReducer,
+});
+const store = createStore(rootReducer, applyMiddleware(thunk));
-ReactDOM.render(
, document.getElementById('root'));
+ReactDOM.render(
, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
diff --git a/src/store/actions/actionTypes.js b/src/store/actions/actionTypes.js
new file mode 100644
index 0000000..b954b80
--- /dev/null
+++ b/src/store/actions/actionTypes.js
@@ -0,0 +1,5 @@
+export const GET_ALL = 'GET_ALL';
+export const GET_TODO = 'GET_TODO';
+export const TOGGLE_DONE = 'TOGGLE_DONE';
+export const DELETE_TODO = 'DELETE_TODO';
+export const ADD_TODO = 'ADD_TODO';
\ No newline at end of file
diff --git a/src/store/actions/index.js b/src/store/actions/index.js
new file mode 100644
index 0000000..3775afa
--- /dev/null
+++ b/src/store/actions/index.js
@@ -0,0 +1,3 @@
+export {
+ getTodos, postTodo, deleteTodo, toggleTodo, getTodo
+} from './todo';
\ No newline at end of file
diff --git a/src/store/actions/todo.js b/src/store/actions/todo.js
new file mode 100644
index 0000000..e3bfdc7
--- /dev/null
+++ b/src/store/actions/todo.js
@@ -0,0 +1,73 @@
+import * as actionTypes from './actionTypes';
+import axios from 'axios';
+
+export const getTodos_ = (todos) => {
+ return {type: actionTypes.GET_ALL, todos: todos}
+}
+
+export const getTodos = () => {
+ return dispatch => {
+ return axios.get('/api/todo')
+ .then(res => dispatch(getTodos_(res.data)));
+ }
+}
+
+export const postTodo_ = (td) => {
+ return {
+ type: actionTypes.ADD_TODO,
+ id: td.id,
+ title: td.title,
+ content: td.content
+ }
+}
+
+export const postTodo = (td) => {
+ return dispatch => {
+ return axios.post('/api/todo/', td)
+ .then(res => {
+ dispatch(postTodo_(res.data));
+ });
+ }
+}
+
+export const deleteTodo_ = (id) => {
+ return {
+ type: actionTypes.DELETE_TODO,
+ targetID: id
+ }
+}
+
+export const deleteTodo = (id) => {
+ return dispatch => {
+ return axios.delete(`/api/todo/${id}`)
+ .then(res => dispatch(deleteTodo_(id)));
+ }
+}
+
+export const toggleTodo_ = (id) => {
+ return {
+ type: actionTypes.TOGGLE_DONE,
+ targetID: id
+ }
+}
+
+export const toggleTodo = (id) => {
+ return dispatch => {
+ return axios.put(`/api/todo/${id}`)
+ .then(res => dispatch(toggleTodo_(id)));
+ }
+}
+
+export const getTodo_ = (td) => {
+ return {
+ type: actionTypes.GET_TODO,
+ target: td
+ }
+}
+
+export const getTodo = (id) => {
+ return dispatch => {
+ return axios.get(`/api/todo/${id}`)
+ .then(res => dispatch(getTodo_(res.data)));
+ }
+}
\ No newline at end of file
diff --git a/src/store/reducers/todo.js b/src/store/reducers/todo.js
new file mode 100644
index 0000000..bd11baa
--- /dev/null
+++ b/src/store/reducers/todo.js
@@ -0,0 +1,43 @@
+import * as actionTypes from '../actions/actionTypes';
+
+const initialState = {
+ todos: [
+ ],
+ selectedTodo: null
+}
+
+const reducer = (state = initialState, action) => {
+ switch(action.type) {
+ case actionTypes.ADD_TODO:
+ const newTodo = {
+ id: action.id,
+ title: action.title,
+ content: action.content,
+ done: action.done
+ }
+ return {...state, todos: [...state.todos, newTodo]};
+ case actionTypes.TOGGLE_DONE:
+ const modified = state.todos.map((todo) => {
+ if(todo.id === action.targetID) {
+ return {...todo, done: !todo.done};
+ } else {
+ return todo;
+ }
+ });
+ return {...state, todos: modified, };
+ case actionTypes.DELETE_TODO:
+ const deleted = state.todos.filter((todo) => {
+ return todo.id !== action.targetID;
+ });
+ return {...state, todos: deleted};
+ case actionTypes.GET_TODO:
+ return {...state, selectedTodo: action.target};
+ case actionTypes.GET_ALL:
+ return {...state, todos: action.todos};
+ default:
+ break;
+ }
+ return state;
+}
+
+export default reducer;
\ No newline at end of file