Как удалить конкретный элемент из сложной структуры данных, сохранив состояние в React-redux?

Question

Моя текущая структура состояния выглядит примерно так:

// state {наборы данных: [{ сеансы: []}, {}, {}]}

Первоначально наборы данных отображаются в таблице. После выбора определенного набора данных в нем отображаются все сеансы в этом наборе данных в табличном формате. Я пытаюсь удалить один сеанс из этого и вернуть все измененное состояние.

Я пытался использовать методы среза, пытаясь

возвращение [ ... state.datasets [IndexofDataset] .sessions.slice (0, action.index), ... state.datasets [IndexofDataset] .sessions.slice (action.index +1)];

ПРИМЕЧАНИЕ: IndexofDataset представляет, какой набор данных был выбран, а индекс представляет, какой сеанс был выбран для удаления. Я знаю, что это просто вернет массив, поэтому я попытался сделать копию состояния и переписать только исходный массив сессий с этим вновь созданным массивом. Это имеет больше смысла в коде, который я публикую ниже.

```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: Невозможно прочитать свойство 'map' из undefined. Это связано с тем, что текущая реализация удаляет все сеансы, а sessionTable пытается отобразить пустой объект.

Answer 1

Вот мой подход. Возможно, не самый эффективный, но он работает

 function getSessions(state = [], action) {
      console.log(state);
      return [
        ...state.map((el, idx) => {
            if (action.studyID === idx){
                    return {
                    ...el,
                    sessions:[...el.sessions.slice(0, action.id), ...el.sessions.slice(action.id + 1)]
                }
            }
            return el;   
        })
      ];
    }

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.datasets, action)
          };

        default:
          return state;
      }
    }