Skip to content
Permalink
Browse files

配列要素にidを追加し、id指定による削除追加

  • Loading branch information
jun68ykt committed May 5, 2019
1 parent e78cc2a commit 8f197ada35f02013c05f152d5116973256b82df9
Showing with 72 additions and 29 deletions.
  1. +10 −7 src/actions/Todo.js
  2. +12 −0 src/components/Todo.css
  3. +17 −3 src/components/Todo.js
  4. +1 −0 src/containers/Todo.js
  5. +32 −19 src/reducers/Todo.js
@@ -2,17 +2,20 @@
export const addTodo = (todo) => {
return {
type: 'ADD_TODO',
payload: {
todo: todo,
}
payload: { todo, }
};
}

export const delTodo = (todo) => {
return {
type: 'DEL_TODO',
payload: {
todo: todo,
}
payload: { todo, }
};
}
}

export const delById = (id) => {
return {
type: 'DEL_BY_ID',
payload: { id }
};
}
@@ -0,0 +1,12 @@
ul { list-style-type: none; }
li { margin-bottom: 4px; }

.todoId {
background-color: cyan;
padding: 2px;
margin-right: 3px;
}

.delete {
margin-right: 3px;
}
@@ -1,19 +1,33 @@
import React from 'react';
import './Todo.css';

export default class Todo extends React.Component {
state = {
todo: ''
}

render() {
const { addTodo, delTodo, delById } = this.props;

// StoreのTodoからリストを生成
const list = this.props.todo.todoList.map((todo, index) => <li key={index}>{todo}</li>)
const list = this.props.todo.todoList.map(e =>
<li key={e.id}>
<button
className="delete"
onClick={() => delById(e.id)}
>
削除
</button>
<span className="todoId">{e.id}</span>
{e.todo}
</li>
);

return (
<div>
<input type="text" onChange={elm => this.setState({ todo: elm.target.value })} />
<button onClick={() => this.props.addTodo(this.state.todo)}>追加</button>
<button onClick={() => this.props.delTodo(this.state.todo)}>削除</button>
<button onClick={() => addTodo(this.state.todo)}>追加</button>
<button onClick={() => delTodo(this.state.todo)}>削除</button>
<ul>
{list}
</ul>
@@ -12,6 +12,7 @@ const mapDispatchToProps = dispatch => {
return {
addTodo: (todo) => dispatch(actions.addTodo(todo)),
delTodo: (todo) => dispatch(actions.delTodo(todo)),
delById: (id) => dispatch(actions.delById(id)),
}
}

@@ -1,23 +1,36 @@
import { Z_DEFAULT_STRATEGY } from "zlib"; // eslint-disable-line

const initialState = {
todoList: [],
}

export const todoReducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todoList: state.todoList.concat([action.payload.id, action.payload.todo])
};
case 'DEL_TODO':
return {
...state,
todoList: state.todoList.filter(todo => todo !== action.payload.todo)
};
default:
return state;
}
};
todoList: [],
};

let nextTodoId = 9001;

export const todoReducer = (state = initialState, action) => {
let index, nextTodoList;

switch (action.type) {
case 'ADD_TODO':
return {
...state,
todoList: [...state.todoList, { id: nextTodoId ++, todo: action.payload.todo }]
};
case 'DEL_TODO':
return {
...state,
todoList: state.todoList.filter(e => e.todo !== action.payload.todo)
};
case 'DEL_BY_ID':
nextTodoList = [...state.todoList];
index = state.todoList.findIndex(e => e.id === action.payload.id);
if (index >= 0) {
nextTodoList.splice(index, 1);
}
return {
...state,
todoList: nextTodoList
};
default:
return state;
}
};

0 comments on commit 8f197ad

Please sign in to comment.
You can’t perform that action at this time.