最终 React 项目

我做到了——我完成了我在 Flatiron School 的最后一个项目！这是一个简单的症状追踪应用，后端用 Ruby on Rails，前端用 React 构建。这很难做到，一部分原因是我发现 React 是我们在 Flatiron 学到的最具挑战性的东西，另一部分原因是我当时是在受伤后做的（我当时的症状日记是这个应用的灵感来源——我把我的小笔记本都录成了电子版！）

尽管 React 学习起来很有挑战性（在我看来），但一旦你克服了学习曲线，就会发现它非常有趣。React 是一个 JavaScript 库，也是构建 SPA 的强大工具。它依赖于状态管理并将其渲染到 DOM。在我的应用中，我还使用了 Redux。Redux 是一种存储和交互状态的方法，允许在组件之间操作和传递数据。

以下是一些帮助我理解 React 和 Redux 的有用图表：

以下是我的项目中状态使用方式的示例。它来自 Form 组件：

class SymptomsForm extends Component {
  state = {
    title: "",
    severity: "",
    notes: "",
  };

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
      \[name\]: value,
    });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.addSymptom(this.state);
    this.setState({
      title: "",
      severity: "",
      notes: "",
    });
    if (
      this.state\["title"\] !== "" &&
      this.state\["severity"\] !== "" &&
      this.state\["notes"\] !== ""
    ) {
      this.props.history.push("/");
    }
  };

这也是 Redux 发挥作用的地方：

状态位于 store 内部的对象树中。为了更改该状态树，必须使用一个 action（一个对象），并且该 action 必须被分发到 store。分发需要使用 reducer 函数。这是我项目中的一个例子，它们都如下所示：

填写表单并点击提交后出现症状的操作：

export const addSymptom = (symptom) => {
  return (dispatch) => {
    fetch("http://localhost:3000/symptoms", {
      method: "POST",
      body: JSON.stringify(symptom),
      headers: { "Content-Type": "application/json" },
    })
      .then((res) => {
        if (res.status === 422) {
          alert("Please fill out all fields");
        }
        return res.json();
      })
      .then((symptoms) =>
        dispatch({ type: "ADD\_SYMPTOMS", payload: symptoms })
      );
  };
};

减速器：

export const symptomsReducer = (state = \[\], action) => {
  switch (action.type) {
    // case 'FETCH\_SYMPTOMS':
    //   return action.payload;
    case 'ADD\_SYMPTOMS':
      return \[...state, action.payload\];
    // case 'DELETE\_SYMPTOM':

    // return \[      
    //   ...state.filter(item => item.id !== action.payload)
    //  \];
    default:
      return state;
  }
};

此处的 switch 语句允许程序根据类型确定应执行哪个函数。我注释掉了其他函数，以展示仅包含 addSymptom 操作的 Reducer 的外观。Reducer 会检测到操作已被执行，并相应地返回状态。有效负载基本上就是操作对象中的数据。

总而言之，我认为 React 是一款很棒的工具，我绝对计划扩展这个项目。我想添加用户身份验证，以及像 GitHub 那样的热图日历来反映条目。敬请期待！目前，以下是该项目的链接：

API

客户

文章来源：https://dev.to/stuxnat/final-react-project-2poi