今、ReactとReduxを使って、ToDoアプリを作成しています。

機能としては、タスクの入力機能・削除機能の2つを現段階では考えています。(この2つが実装出来次第、他の機能を追加する予定。)
タスクの入力は、入力フォームに入力してもらって、ADDボタンを押すと、フォームの下にある部分にリスト表示させる予定です。
又、削除機能に関しては、タスク名の横に削除ボタンを付けて、その削除ボタンをクリック

困っていること

Store.jsと言うファイルを作成して、そのファイル内で、

stateの初期値
レデューサー
レデュースアクション
アクションクリエーター
ストアの作成

という流れで、コードを記述しています。

しかし、タスク削除機能のレデュースアクションを作成しているのですが、
以前、Vue.jsで似たようなアプリを作った時に、findIndexを使ってクリックしたタスクのインデックス番号を取得することで削除できたので、
今回もfindIndexを使って削除ボタンを用いた削除機能を実装しようかなと考えているのですが、
findIndexを使って記述すると、actionを引数に渡しても、actionを入れる場所がなくなってしまいます。

このような場合、どのように対処すべきでしょうか。ご教授頂きたいです。ヒントだけでも構いません。

又、Reduxを用いて、削除ボタンで削除するタイプの削除機能を実装する場合、findIndex以外にもおすすめの方法などありますでしょうか?
もし、あれば参考にさせて頂きたいので、教えて頂けますと幸いです。

よろしくお願い致します。

**# Store.jsファイルのコード
こちらが、作成したStore.jsファイルの中身です。

JavaScript
1import { createStore } from 'redux';
2
3// stateの初期値を設定する
4const init = {
5    todos: [{
6        title: 'パンを買う。'
7    }],
8    mode: 'default'
9}
10
11// レデューサーを作成
12export function todoReducer(state = init, action) {
13    switch(action.type) {
14        case 'ADD_TODO':
15            return addReduce(state, action);
16        case 'DELETE_TODO':
17            return deleteReduce(state, action);
18        default:
19            return state;
20    }
21}
22
23// レデュースアクション
24// 追加
25function addReduce(state, action) {
26    let todos = {
27        title: action.title
28    }
29    let taskList = state.todos.slice(); // 一度、配列をコピーしてから他の処理する。
30    taskList.push(todos); // 末尾に追加。
31    return {
32        todos: taskList,
33        mode: 'default'
34    };
35}
36
37**// 削除 現在困っているところ!
38function deleteReduce(state, action, title) {
39    let taskList = state.todos.slice(); // 一度、配列をコピーしてから他の処理する。
40    let index = taskList.findIndex(todo => todo.title === title);
41    taskList.splice(index, 1);
42    return {
43        todos: taskList,
44        mode: 'delete'
45    }
46}**
47
48// アクションクリエーター
49// 追加
50export function addTodo(text) {
51    return {
52        type: 'ADD_TODO',
53        title: text
54    }
55}
56
57// 削除
58export function deleteTodo(text) {
59    return {
60        type: 'DELETE_TODO',
61        title: text
62    }
63}
64
65// storeを作成
66export default createStore(todoReducer);

以下の画像にあるように、deleteReduceの引数actionが薄い色になってしまっています。
コードの中で使わなければ、色が薄くなるということはわかってはいるのですが、actionの使い所がわからない状態です。

補足(参考にしているテキストに書かれている方法で削除機能を実装した例)

テキストのコードを参考にしながら記述しているのですが、テキストでは、削除機能は、ドロップダウンリストのような形式で、選択したタスクが消去されるようになっているので、今回とは状況が異なってしまいます。
以下は、テキストに書かれている削除機能の書き方を見て作ったアプリのGIF画像です。
このように、選択欄があってそこから現在表示されているタスクの中から削除したいタスクを選択して削除するという方法です。

行動規範の内容に同意します

回答1件

ベストアンサー

回答としたはfindIndexを使うことはできる、です。

findIndexを使って記述すると、actionを引数に渡しても、actionを入れる場所がなくなってしまいます。

おそらくreduxを学習したてなのかと思います。
良さげな記事があったので先に載せておきます。

Reduxが分からない人のためにReduxを概念から説明してみる

reducerは画面(など)からdispatchされたactionを基にstoreもしくはその中のstateを更新するわけです。
その時にどのstateをどういう風に変更するかという情報はactionに内包されます(payloadやmetaと呼ばれているものです)。

提示いただいた例ですとaddReduce内でaction.titleのようにactionに内のtitleを使って処理を行なっているわけです。
deleteReduceでも同様の書き方をすればいいので、第三引数として渡しているtitleをactionに入れれば問題ないかと思います。

javascript
1function deleteReduce(state, action /* ,title */) {
2    let taskList = state.todos.slice(); // 一度、配列をコピーしてから他の処理する。
3    //let index = taskList.findIndex(todo => todo.title === title);
4    let index = taskList.findIndex(todo => todo.title === action.title);
5    taskList.splice(index, 1);
6    return {
7        todos: taskList,
8        mode: 'delete'
9    }
10}