Reduxで配列の要素を削除したい

Question

React+Reduxで配列要素をIDで削除したい

React+Reduxを学び始めてまだ、数ヶ月です。
簡単なTodoリストを作成し、
配列に要素を追加していくことはできたのですが、
削除することができません。

削除する際にKeyとして利用したいIDをどこから取ればいいのか、
わからなく困っています。

できれば、配列のKey要素をうまくReducerに渡して、処理したいと思っています。

実際のコード

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 }
    };
  }

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) => <li key={index}>{todo}</li>)
    // <button onClick={() => this.props.changeTodo(this.state.todo)}>変更</button></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.deltodo)}>削除</button>
        <ul>
          {list}
        </ul>
      </div>
    );
  }
}

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)

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"

Answer 1

こんにちは。

この回答では、削除の仕様を、以下の手順(1),(2)のようなものと解釈しました。

(1) foo, bar, baz, foo, bar, baz を順に追加する。以下のように表示される。

• foo
• bar
• baz
• foo
• bar
• baz

(2) その後、入力欄に bar と入力して [削除] をクリックすると、以下のように表示される。

• foo
• baz
• foo
• baz

すなわち、入力されたテキストに完全一致する todoアイテムのすべてをリストから削除するものとします。

削除の仕様が上記のようなものであることを前提として、コードの修正は以下のようにすればよいです。

(1) components/Todo

this.state に todo がありますが、削除ボタンをクリックされたときに this.props.delTodo に渡す引数も、 this.state.todo を使うようにします。

修正前：

<button onClick={() => this.props.delTodo(this.state.deltodo)}>削除</button>

修正後：

<button onClick={() => this.props.delTodo(this.state.todo)}>削除</button>

(2) actions/Todo

上記の (1) に合わせて、アクションクリエータdelTodoで返されるアクションのpayload に含まれるプロパティも修正しておきます。

修正前：

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

修正後：

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

(3) containers/Todo

(2)と同様に、deltodo を todo に修正します。

修正前：

delTodo: (deltodo) => dispatch(actions.delTodo(deltodo)),

修正後：

delTodo: (todo) => dispatch(actions.delTodo(todo)),

(4) reducers/Todo

削除後の state.todoList を作成する部分を以下のように修正します。

修正前：

todoList: state.todoList.concat([action.payload.todo])

修正後：

todoList: state.todoList.filter(todo => todo !== action.payload.todo)

動作確認用のコード

ご質問に挙げられているコードに対して上記の修正を加えていったものを、以下のレポジトリ

• https://github.com/jun68ykt/q187745

に上げておきましたので、お手元に git clone するなりして動作確認してみてください。アプリのひな形をcreate-react-appで作っているので、 yarn install , yarn start で動きます。初回のコミットでは、JSのコードはご質問に挙げられているものをそのままコピペしたものを使って、index.js と App.jsはこちらで適宜作成しました。

もし削除の要件が、冒頭に書いたようなものではない場合は、<input>で入力された文字列から、どのように削除されるアイテムが指定されるのか、コメントからお知らせください。

以上、参考になれば幸いです。

追記

コメントに回答します。

まず初めに、components/Todo.js の以下の部分

// StoreのTodoからリストを生成
const list = this.props.todo.todoList.map((todo, index) => <li key={index}>{todo}</li>)

で <li> の key として配列のインデクスである index を渡していますが、これは実は推奨されないkey の指定方法です。 Reactのドキュメントの Lists and Keys の下の方に、

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

というコード例に対して

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.

と書かれています。将来、ご質問上げられているコードの todoList も、要素の順序を入れ替える機能を追加したくなるかもしれません。なので、まず todoList を単純な文字列の配列ではなく、以下のような形式のオブジェクトの配列にします。

{
  id: 10,  /* 1ずつ増える整数 */ 
  todo: "コードを書く", /* 文字列 */
}

このように、todoListの要素を拡張したのち、

• IDを特定して、そのIDを持つ要素を配列から削除するアクションとリデューサー内の処理の追加
• 適宜、各ToDoアイテムごとの１件削除を行うUIを追加

という修正を行います。

さきほど挙げたレポジトリでは、順に、以下の３点のコミットでこれらを行いました。（cloneしたのであれば pull してください）

• 配列要素に一意のIDを追加

• 各ToDoアイテムごとの削除ボタン追加

• 各Todoアイテム削除時の処理追加

以下は、現時点のものを実行して、foo, bar, baz とアイテムを追加していったときの表示です。

ちなみに、 id を 9001 始まりにしているのは特に意味はありませんが、配列のインデクスではない ことを明確にするために 0 始まりではない数字にしてみたという意図です。

上記の状態から bar の左側にある削除ボタンをクリックすると、リストから bar が削除され、以下のようになります。

以上です。何か不明な点あれば、またコメントください。

Comments

[sakusaka]

jun68ykt さん。こんにちは。

回答ありがとうございます！
文字列でのマッチはうまく動けました！

余分なコードが記載されており、申し訳ないです。
IDが合致した場合に削除するような動きをしたいと思っています。

<li key=1>foo</li>
<li key=2>fooo</li>
<li key=3>foooo</li>
<li key=4>foooo</li>
<li key=5>fooooo</li>
<li key=6>foooooo</li>
<li key=7>fooooooo</li>

こうゆうリストがあった場合、
①Keyをうまくカウントアップさせて表示させる方法
②Key番号にマッチしたものだけを削除する方法
の2点を実現させることができず、教えていただけると嬉しいです。

お手数おかけして申し訳ないですが、
再度、ご回答いただけると幸いです。
どうぞよろしくお願いいたします。

[jun68ykt]

こんにちは

> 文字列でのマッチはうまく動けました！

とのことでよかったです！

①②について回答のほうに追記し、対応する修正を、GitHubのほうにコミットしたのでご確認ください。

[sakusaka]

ありがとうございます！
コード確認させていただきました。

いただいたコードを参考にしつつ、自分のコードに反映を
していたのですが、やはりうまくできず、
IDをカウントアップして、stateに追加するところまではできたのですが、
やはり、componentsにて、liタグを生成するところで、IDがHTMLに描写されないようです。。。

もしよろしければコードを見ていただけますと幸いです。
https://github.com/sakusaka/react-redux-todo.git

どうぞよろしくお願いいたします。

[jun68ykt]

コードを拝読しました。
現状に対して、以下のコミット

https://git.io/fjnKt

のような修正をすると、私のレポジトリの現状とほぼ同じものになります。

一応、上記のコミットを以下ににてPRしたので、問題なさそうであれば、マージして頂ければと思います。（当方のローカルで動作確認はしています。）

https://github.com/sakusaka/react-redux-todo/pull/4

もちろんマージしないで、参考にするだけでPRはクローズでもけっこうです。

もとのコードであまりよろしくない点は、id を導入するのはよいのですが、ADD_TODOするごとに、

[action.payload.id, action.payload.todo]

をconcatしているところかなと思います。todoList を、

{
id: 100,
todo: "hoge"
}

というオブジェクトを要素とする配列にすれば、すっきり出来ます。

[sakusaka]

失礼しました！まだmasterに自分の修正をマージしていなかったです。

https://github.com/sakusaka/react-redux-todo/tree/feature/dev201903
こちらに開発途中のものを入れております。
やはり、componentsにて、liタグを生成するところで、IDがHTMLに描写されないです。。。

[jun68ykt]

feature/dev201903 ブランチの内容を見ました。
まだ、
・todoReducerに case 'DEL_BY_ID' が無い
のと、
・DEL_TODOによる削除ができない
のは、作業途中だからだと思うので、それは置いておくとしまして、確認ですが

> IDがHTMLに描写されないです。。。

の疑問は、言い換えると、

components/Todoの中で、
<li key={e.id}>　と書いているのに、ブラウザに展開されたHTMLには、この key 属性が <li> に入ってこないのはどうして？

ということでしょうか？

とすると、この疑問に対する回答としては、key は React が要素のレンダリングを効率的に行うために使うprop で、HTMLに展開されたときに、 key という属性として展開されるものではないです。

なので、id を見た目で確認できるよう表示させるには、keyとは別のところにも書く必要があります。たとえば

<li key={e.id}>
{e.todo}
</li>

としているところを、

<li key={e.id}>
{e.todo}/{e.id}
</li>

のようにしておくと、todo が "hoge" で idが 1001 なら、対応する<li>は

・hoge/1001

と表示されます。

[jun68ykt]

もしくは、見た目上では表示させたくないが、 li の何らかの属性値にしておきたいのであれば、data- 属性を使って、

<li key={e.id} data-id={e.id}>
{e.todo}
</li>

としておけば、HTMLに展開されたときには

<li data-id="1001">hoge</li>

のようになります。

[sakusaka]

おおおお！ありがとうございます！！！！！

表示できました。そういうことなんですね。
全く初歩的な質問に長らくお付き合いいただき、本当にありがとうございます。

そして、最後ご確認遅くなり申し訳ありません。。。

本当にありがとうございました！！

[jun68ykt]

どういたしまして！
解決されたようでよかったです ????
ちなみに、質問の対象になるコードをきちんと用意してGitHub に上げておいたのは、とてもよいと思いました。（ので、質問の評価を＋１）

[sakusaka]

ありがとうございます！
他の質問するときも気をつけますね。