如何将工作的JS函数转换为Redux格式？

Question

我正在开发一个可以预订用户的应用程序。我设法使用React + JavaScript使其全部正常工作，但是现在我正试图将工作产品转换为Redux的reducer，actions，store等。

我已经看过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
    });
  };