Настройка правильной реализации MongoDB в приложении React

Итак, в настоящее время я работаю над приложением для стажировки React (MERN), которое представляет собой простой список дел с возможностью создавать, удалять и редактировать задачи. Я опубликую из него код, но вы также можете посмотреть полный код на GitHub: https://github.com/Wonderio619/magisale-internship-todo

Следующая задача - подключить мое приложение к MongoDB. У меня есть некоторый "шаблонный" код - я уже установил соединение с MongoDB, также есть маршрутизатор Express с такими маршрутами, как получение списка всех задач, отправка задачи в базу данных, обновление задачи с идентификатором, получение задачи с идентификатором:

const express = require("express");
const router = express.Router();
let Todo = require('../models/model')

// get all todo list with id
router.get('/', function (req, res) {
  Todo.find()
    .then((todos) => res.json(todos))
    .catch((error) => res.send(error))
})

// send todo to database
router.post('/', function (req, res) {
  let todo = new Todo();
  todo.titleText = req.body.title;
  todo.todoText = req.body.body;

  todo.save(function (err) {
    if (err)
      res.send(err);
    res.send('Todo successfully added!');
  });
})

// get todo with id
router.get('/:todoId', function (req, res) {
  Todo.findById(req.params.todoId)
    .then(foundTodo => res.json(foundTodo))
    .catch(error => res.send(error));
})

// updates todo with id
router.put('/:todoId', function (req, res) {
  Todo.findOneAndUpdate({ _id: req.params.todoId }, req.body, { new: true })
    .then((todo) => res.json(todo))
    .catch((error) => res.send(error))
})

// deletes todo with id
router.delete('/:todoId', function (req, res) {
  Todo.remove({ _id: req.params.todoId })
    .then(() => res.json({ message: 'todo is deleted' }))
    .catch((error) => res.send(error))
})

module.exports = router;

Эти маршруты используются при вызове соответствующих методов из приложения todo:

import React, { Component } from 'react';
import './ToDo.css';
import Logo from './assets/logo.png';
import ToDoItem from './components/ToDoItem';
import AppBar from './components/AppBar';
import Popover from './components/Popover';
import { connect } from 'react-redux';

class ToDo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      title: '',
      todo: '',
    };
  };

  componentDidMount = () => {
    fetch("/api/todos")
      .then(data => data.json())
      .then(res => this.setState({ list: res.data }));
    console.info(this.state.list)
  };


  createNewToDoItem = () => {
    fetch("/api/todos", {
      method: "post",
      headers: new Headers({
        "Content-Type": "application/json"
      }),
      body: JSON.stringify({
        title: this.state.title,
        body: this.state.todo
      })
    })
      .catch(err => {
        console.error(err);
      });

    if (this.state.title !== '' & this.state.todo !== '') {
      this.props.createTodoItem(this.state.title, this.state.todo);
      this.setState({ title: '', todo: '' });
    }
  };

  handleTitleInput = e => {
    this.setState({
      title: e.target.value,
    });
  };

  handleTodoInput = e => {
    this.setState({
      todo: e.target.value,
    });
  };

  editItem = (i, updTitle, updToDo) => {
    const modifyURL = "/api/todos/" + i;
    fetch(modifyURL, {
      method: "put",
      headers: new Headers({
        "Content-Type": "application/json"
      }),
      body: JSON.stringify({
        title: updTitle,
        todo: updToDo
      })
    })
      .then(resp => {
        if (!resp.ok) {
          if (resp.status >= 400 && resp.status < 500) {
            return resp.json().then(data => {
              let error = { errorMessage: data.message };
              throw error;
            });
          } else {
            let error = {
              errorMessage: "Please try again later. Server is not online"
            };
            throw error;
          }
        }
        return resp.json();
      })
      .then(newTodo => {
        let arr = this.props.list;
        arr[i].title = updTitle;
        arr[i].todo = updToDo;
        this.setState({ updateList: true });
      });
  };

  deleteItem = indexToDelete => {
    const deleteURL = "/api/todos/" + indexToDelete;
    fetch(deleteURL, {
      method: "delete"
    })
      .then(resp => {
        if (!resp.ok) {
          if (resp.status >= 400 && resp.status < 500) {
            return resp.json().then(data => {
              let error = { errorMessage: data.message };
              throw error;
            });
          } else {
            let error = {
              errorMessage: "Please try again later. Server is not online"
            };
            throw error;
          }
        }
        return resp.json();
      })
      .then(() => {
        this.props.deleteTodoItem(indexToDelete);
      });
  };

  randId() {
    return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
  }

  eachToDo = (item, i) => {
    return <ToDoItem
      key = {this.randId()}
      title = {item.title}
      todo = {item.todo}
      deleteItem = {this.deleteItem.bind(this, i)}
      editItem = {this.editItem.bind(this, i)}
    />
  };

  render() {
    const { list } = this.props;
    return (
      <div className = "ToDo">
        <img className = "Logo" src = {Logo} alt = "React logo" />
        <AppBar />
        <div className = "ToDo-Container">

          <div className = "ToDo-Content">
            {list.map(this.eachToDo)}
          </div>

          <div>
            <Popover
              toDoValue = {this.state.todo}
              titleValue = {this.state.title}
              titleOnChange = {this.handleTitleInput}
              toDoOnChange = {this.handleTodoInput}
              addHandler = {this.createNewToDoItem}
            />
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    list: state.list
  }
}

const mapDispatchToProps = dispatch => {
  return {
    deleteTodoItem: id => {
      dispatch({ type: "DELETE_TODO", id: id });
    },
    createTodoItem: (title, todo) => {
      dispatch({ type: "CREATE_TODO", title: title, todo: todo });
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(ToDo);

Обратите внимание, что массив "list" из состояния на самом деле не используется, потому что здесь у меня есть начальное состояние списка в состоянии Redux (это может быть реализовано плохо, но это все равно):

const initState = {
    list: [
        {
            title: 'Cup cleaning',
            todo: "Wash and take away the Kurzhiy's cup from WC"
        },
        {
            title: 'Smoking rollton',
            todo: 'Do some rollton and cigarettes'
        },
        {
            title: 'Curious dream',
            todo: 'Build a time machine'
        }
    ],
};

const rootReducer = (state = initState, action) => {

    switch (action.type) {

        case "DELETE_TODO":
            let newList = state.list.filter((todo, index) => action.id !== index)
            return {
                ...state,
                list: newList
            }

        case "CREATE_TODO":
            const title = action.title;
            const todo = action.todo;

            let createdList = [
                ...state.list,
                {
                    title,
                    todo
                }
            ]
            return {
                ...state,
                list: createdList
            }

        default:
            return state;

    }
}

export default rootReducer;

Итак, теперь мне нужна помощь - если я все правильно понимаю, состояние моего списка теперь должно храниться в базе данных MongoDB. Но в настоящее время он находится в Redux, как мне правильно переключиться с реализации текущего состояния на MongoDB?

Также я понимаю, что моя реализация MongoDB далека от совершенства, я новичок в этом, но мне нужно решить следующие проблемы: 1) Я попытался получить все задачи из базы данных в методе ComponentDidMount и сохранить их в массиве, но console.info всегда показывает, что массив пуст, что-то определенно неправильно. 2) Кроме того, соединение с базой данных на самом деле не настроено, потому что в целом я могу только добавлять задачи в базу данных, но функции удаления или редактирования не работают, потому что я немного застрял в том, как реализовать этот индексный материал, должен ли я использовать ObjectId свойство из MongoDB или мне следует передавать индексы из основного компонента в базу данных и как?

Также будут очень признательны любые глобальные рекомендации относительно правильной реализации mongodb и предложения или исправления в моем коде :)