Reactjs 当modal在react中打开时，后台组件是否会卸载？如果没有，如何使用redux维护/存储模态和反应组件的状态？

演示不工作，但文件结构

我需要打开一个模式，当我在这个URL仪表板/SomeMail中单击某个内容时，它应该使用仪表板/SomeMail/：id打开

我想维护一些邮件页面的状态，其中一封邮件和该邮件的模式，反之亦然

在路由器I交换机中

因为我需要维护状态，所以将状态存储在reduceredux中

但问题是什么时候储存

a组件卸载时我可以存储吗？ 当modal打开时，组件是否会卸载？ c若组件不会卸载，我是否应该一直触发reducer方法，以便在EmailsHome或EmailModal中存储每次状态更改

---

导航到模式路由时，组件将卸载。也就是说，您应该避免在componentWillUnmount中执行除清理方法之外的逻辑

当用户单击电子邮件时，您似乎希望更新redux中的某些状态，从而使他们导航到不同的路由并打开模式

如果是这种情况，您应该在将它们发送到另一个页面的链接的onClick处理程序中触发此操作

我已经创建了一个关于如何实现此功能的基本模板：

整体部分如下所示：

Email.js 单击“标记为已读”时，将切换选中状态 电子邮件组件的。 点击链接进行后续操作，它将呼叫我们的action creator， 它将传入消息的id和状态值 对或错。 保存我们的消息数组的Redux更新消息 具有匹配的id，并获取我们在其中配置的状态值 我们的组成部分。将读取值设置为true或false。 EmailModal.js 组件挂载后，我们调用action creator来查找电子邮件 在Redux中使用与url中相同的id。 我们将显示该电子邮件，现在取决于您是否 已更改上一页中电子邮件的状态，或 未读，它将获得更新的值并在模式中显示。

---

总之，是的，您可以在React导航到另一个路由的过程中执行redux逻辑。在此过程中，我们将一些组件状态值传递给了action creator，它更新了redux状态，当我们最终导航到modal组件时，它得到了更新的值。

编码器查看下面的解决方案，并告诉我这是否有帮助：

     <Switch>
       <Route path="dashboard/someMails" component={EmailsHome} />
       <Route path="dashboard/someMails/:id" component={EmailModal} />
     </Switch>` 

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { updateEmail } from "./emailActions";

const Email = props => {
  const [checked, setChecked] = useState(props.read);
  return (
    <div>
      <button
        style={{ background: "transparent", border: "none" }}
        onClick={() => props.updateEmail(props.id, checked)}
      >
        <Link to={`/dashboard/someMails/${props.id}`}>{props.message}</Link>
      </button>
      <button onClick={() => setChecked(!checked)}>Mark As Read</button>
      <p>{checked ? "Read" : "Unread"}</p>
    </div>
  );
};

const mapDispatchToProps = dispatch => {
  return {
    updateEmail: (id, value) => {
      dispatch(updateEmail(id, value));
    }
  };
};

export default connect(
  null,
  mapDispatchToProps
)(Email);

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { getEmail } from "/emailActions";
import { Link } from "react-router-dom";

const EmailModal = ({ emails, getEmail, match }) => {
  useEffect(() => {
    const id = match.params.id;
    getEmail(id);
  }, []);

  return (
    <div>
      <Link to="/dashboard/someMails">Back to emails</Link>
      <h4>Message: {emails.currentEmail.message}</h4>
      <h4>Read:{"" + emails.currentEmail.read}</h4>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    emails: state.emails
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getEmail: id => {
      dispatch(getEmail(id));
    }
  };
};

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