在反应中打开模态时，后台组件是否会卸载？如果不是，如何使用 redux maintain/store 模态和反应组件的状态？

Question

演示（不工作但用于文件结构） https://codesandbox.io/s/material-demo-bsr06

我需要在这个 URL dashboard/someMails 中单击某些内容时打开一个模式，它应该以 dashboard/someMails/:id 打开。
我想维护 someMmails 页面的其中一封电子邮件的状态以及该特定电子邮件的模式，反之亦然
在 React 路由器中我切换

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

由于我需要维护状态，将状态存储在reducer(redux)中。
但是什么时候存储是个问题。

a) 我可以在 componentUnMounts 时存储吗？ b) 模态打开时组件会卸载吗？ c) 如果组件不会卸载，我是否应该继续触发 reducer 方法来存储 EmailsHome 或 EmailModal 中的每次状态变化？

Answer 1

当您导航到模态路由时，该组件将卸载。话虽如此，除了 clean-up 方法之外，您应该避免在 componentWillUnmount() 中执行逻辑。

您似乎想在用户单击电子邮件时更新 redux 中的一些 state，使他们导航到不同的 route 并打开模式。

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

我已经创建了一个关于如何实现此功能的基本模板：https://codesandbox.io/s/material-demo-wpisp

积分在这里：

Email.js

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);

当您点击“标记为已读”时，将切换到“已选中”状态电子邮件组件。
Follow-up点击link，会调用我们的action-creator，这将传入消息的 id 和 state-value （对或错）。
保存我们消息数组的 Redux 更新消息与匹配的id，它得到了我们在里面配置的state-value 我们的组件。将“读取”值设置为（真或假）。

EmailModal.js

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);

组件挂载，我们调用action-creator来查找邮件在 Redux 中与我们 url.
我们显示该电子邮件，现在取决于您是否更改了上一页中电子邮件的状态（阅读或未读），它将获取更新后的值并将其显示在模式中。

总而言之，是的，你可以在 React 导航到另一个 Route 的过程中执行 redux-logic。在此，我们将一些组件 state-value 传递给 action-creator，它更新了 redux-state，当我们最终导航到模态组件时，它获得了更新的值。

在反应中打开模态时，后台组件是否会卸载？如果不是，如何使用 redux maintain/store 模态和反应组件的状态？

Will the background component unmount when modal is open in react? If not, how to maintain/store states of modal and react component using redux?

modal-dialog

reactjs

react-router

redux

material-ui

Email.js

EmailModal.js