Как преобразовать рабочую функцию JS в формат Redux?

Question

Я работаю над приложением, в котором пользователи могут записаться на прием. Мне удалось заставить все это работать с использованием React + JavaScript, однако сейчас я пытаюсь преобразовать свой рабочий продукт в редукторы Redux, действия, хранилище и т. Д.

Я довольно внимательно изучил все учебники на YouTube, доступные для Redux, однако все они включают очень простые функции, такие как добавление или удаление целого числа. Я также использую модал, который немного запутал код. Функции работают как задумано, хотя и грязно. Я просто хочу изменить их на соглашения Redux.

state = {
    timeslot: "",
    users: [],
    newUser: {
      name: "",
      number: "",
      timeslot: ""
    },
    blankUser: {
      name: "",
      number: "",
      timeslot: ""
    },
    availableTimes: [
      {
        time: "9 a.m.",
        isTimeBooked: false
      },
      {
        time: "10 a.m.",
        isTimeBooked: false
      },
      {
        time: "11 a.m.",
        isTimeBooked: false
      },
      {
        time: "12 a.m.",
        isTimeBooked: false
      },
      {
        time: "1 p.m.",
        isTimeBooked: false
      },
      {
        time: "2 p.m.",
        isTimeBooked: false
      },
      {
        time: "3 p.m.",
        isTimeBooked: false
      },
      {
        time: "4 p.m.",
        isTimeBooked: false
      },
      {
        time: "5 p.m.",
        isTimeBooked: false
      }
    ]
  };

activateModal = (e, i) => {
    let value = e.target.innerHTML;
    let updatedNewUser = { ...this.state.newUser };
    if (this.state.availableTimes[i].isTimeBooked === false) {
      updatedNewUser["timeslot"] = value;
      this.setState({ timeslot: value, newUser: updatedNewUser });
    } else {
      let bookedUser = this.state.users.filter(user => {
        return user.timeslot === value;
      });
      updatedNewUser = bookedUser[0];
      this.setState({ newUser: updatedNewUser });
    }
  };

  handleInput = e => {
    const updatedNewUser = { ...this.state.newUser };
    updatedNewUser[e.target.name] = e.target.value;
    this.setState({ newUser: updatedNewUser });
  };

  handleSubmit = e => {
    let updatedNewUser = { ...this.state.newUser };
    let allUsers = [...this.state.users];
    const currentUser = allUsers.filter(
      user => user.timeslot === updatedNewUser.timeslot
    );
    let combinedUsers;
    if (currentUser[0]) {
      const filteredUsers = allUsers.filter(
        user => user.timeslot !== updatedNewUser.timeslot
      );
      combinedUsers = filteredUsers.concat([this.state.newUser]);
    } else {
      combinedUsers = [...this.state.users, this.state.newUser];
    }
    let updatedAvailability = [...this.state.availableTimes];
    const currentTime = updatedAvailability.filter(
      time => time.time === this.state.timeslot
    );
    const newAvailableTimes = updatedAvailability.map(newTime => {
      if (newTime.time === currentTime[0].time) {
        newTime.isTimeBooked = true;
      }
      return newTime;
    });
    updatedNewUser["name"] = "";
    updatedNewUser["number"] = "";
    updatedNewUser["timeslot"] = "";
    this.setState({
      users: combinedUsers,
      newUser: updatedNewUser,
      availableTimes: newAvailableTimes
    });
  };