React-reduxで状態を保持しながら、複雑なデータ構造から特定のアイテムを削除するにはどうすればよいですか？

私の現在の状態構造は次のようになります。

//状態{データセット：[{セッション：[]}、{}、{}]}

最初に、データセットはテーブルに表示されます。特定のデータセットを選択すると、そのデータセット内のすべてのセッションが表形式で表示されます。その中から1つのセッションを削除して、変更された状態全体を返そうとしています。

スライスメソッドを使ってみました

return [... state.datasets [IndexofDataset] .sessions.slice（0、action.index）、... state.datasets [IndexofDataset] .sessions.slice（action.index +1）];

注：IndexofDatasetはクリックされたデータセットを表し、indexは削除するためにクリックされたセッションを表します。これは配列を返すだけなので、状態のコピーを作成し、元のセッション配列だけをこの新しく作成された配列で上書きしてみました。以下のコードimの投稿でより意味があります。

```javascript
    function getDataset(state = {}, action) {
      return [...state.slice(0, action.index), ...state.slice(action.index + 1)];
    }

    function getSessions(state = {}, action) {
      console.log(state);
      return [
        ...state.datasets[action.studyID].sessions.slice(0, action.index),
        ...state.datasets[action.studyID].sessions.slice(action.index + 1)
      ];
    }

    export default function metadata(state = {}, action) {
      switch (action.type) {
        case "DELETE_DATASET":
          return {
            //take the current state
            ...state,
            // overwrite this dataset with a new one
            datasets: getDataset(state.datasets, action)
          };

        case "DELETE_SESSION":
          return {
            ...state,
            datasets: getSessions(state, action)
          };

        default:
          return state;
      }
    }
    ```

これがレデューサーです。DELETE_DATASETの場合は問題なく機能しますが、その機能を複製できないようです

```javascript
export function deleteSession(studyID, index) {
  return {
    type: "DELETE_SESSION",
    studyID,
    index
  };
}
```

これは、セッションテーブルで削除ボタンが押されたときに実行されるアクションです。

```javascript
import React, { Component } from "react";
import { Link } from "react-router-dom";
import SessionTable from "../backend/SessionTable";

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as actionCreators from "../../../actions/actionCreators";

class Sessions extends Component {
  handleDelete = (studyID, index) => {
    this.props.deleteSession(studyID, index);
  };

  render() {
    return (
      <div className="container">
        <h1>Sessions</h1>
        <SessionTable
          data={this.props.metadata}
          index={this.props.match.params.studyID}
          onDelete={this.handleDelete}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    metadata: state.metadata
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Sessions);
```

これはsessionTableをレンダリングするコンポーネントであり、sessionTable行の削除ボタンをクリックすると、このコンポーネントに対してonDeleteイベントが発生し、deleteSessionアクション関数が呼び出されます。

```javascript
class SessionTable extends Component {
  render() {
    return (
      <React.Fragment>
        <table className="table">
          <thead>
            <tr>
              {/* display row with all table column titles */}
              {header.map((h, i) => (
                <th key={i} i={i}>
                  {" "}
                  {h}{" "}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {/* display all sessions with in the specified study*/}
            {this.props.data.datasets[this.props.index].sessions.map(
              (data, i) => (
                <tr key={i} i={i}>
                  <td i={i}>
                    <Link to={this.url(i, this.props.index)}>{data.name}</Link>
                  </td>
                  <td>{data.start_time}</td>
                  <td>{data.end_time}</td>
                  <td>{data.date_created}</td>
                  <td>
                    <button
                      onClick={() => {
                        this.props.onDelete(this.props.index, i);
                      }}
                      className="btn btn-danger btn-sm"
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              )
            )}
          </tbody>
        </table>
      </React.Fragment>
    );
  }
}

export default SessionTable;
```

SessionTable.js

DELETE_DATASETは、対応するデータセットが削除された新しい配列によってデータセット配列が上書きされた状態を返します。この機能をDELETE_SESSIONの場合で複製したいのですが、機能していないようです。

sessionTableで発生するエラーはTypeErrorです：undefinedのプロパティ 'map'を読み取れません。これは、現在の実装がすべてのセッションを削除し、sessionTableが空のオブジェクトをマップしようとしているためです。