### React+Reduxで配列要素をIDで削除したい React+Reduxを学び始めてまだ、数ヶ月です。簡単なTodoリストを作成し、配列に要素を追加していくことはできたのですが、削除することができません。削除する際にKeyとして利用したいIDをどこから取ればいいのか、わからなく困っています。できれば、配列のKey要素をうまくReducerに渡して、処理したいと思っています。 ### 実際のコード ```action export const addTodo = (todo) => { return { type: 'ADD_TODO', // id: nextTodoId++, payload: { todo: todo } }; } export const delTodo = (deltodo) => { return { type: 'DEL_TODO', payload: { deltodo: deltodo } }; } export const changeTodo = (changetodo) => { return { type: 'CHANGE_TODO', payload: { changetodo: changetodo } }; } ``` ```components import React from 'react'; export default class Todo extends React.Component { state = { todo: '' } render() { console.log(this.props); // StoreのTodoからリストを生成 const list = this.props.todo.todoList.map((todo, index) =>

{todo}

) // ) return (

this.setState({ todo: elm.target.value })} />

{list}

); } } ``` ```containers import { connect } from 'react-redux'; import * as actions from '../actions/Todo'; import Todo from '../components/Todo'; const mapStateToProps = state => { return { todo: state.todo, deltodo: state.deltodo, changetodo: state.changetodo, } } const mapDispatchToProps = dispatch => { return { addTodo: (todo) => dispatch(actions.addTodo(todo)), delTodo: (deltodo) => dispatch(actions.delTodo(deltodo)), changeTodo: (changetodo) => dispatch(actions.changeTodo(changetodo)), } } export default connect(mapStateToProps, mapDispatchToProps)(Todo) ``` ```reducer const initialState = { todoList: [], } export const todoReducer = (state = initialState, action) => { switch (action.type) { case 'ADD_TODO': return { ...state, todoList: state.todoList.concat([action.payload.todo]) }; case 'DEL_TODO': return { ...state, todoList: state.todoList.concat([action.payload.todo]) }; case 'CHANGE_TODO' : const changetodo = action.payload.changetodo; const changeState = Object.assign({}, state); changeState.todoList.pop(action.id, changetodo); return changeState; default: return state; } }; ``` ### 試したこと Reducer内で、TodoをAddする際に、action.idを付与したりしましたが、配列として、下記のような感じとなり、うまく取得できませんでした。 ``` todoList: Array(3) 0: "0" 1: "dscsd" 2: "1" 3: "dscsd" ```