在反应中打开模态时,后台组件是否会卸载?如果不是,如何使用 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?

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

  1. 我需要在这个 URL dashboard/someMails 中单击某些内容时打开一个模式,它应该以 dashboard/someMails/:id 打开。

  2. 我想维护 someMmails 页面的其中一封电子邮件的状态以及该特定电子邮件的模式,反之亦然

  3. 在 React 路由器中我切换

     <Switch>
       <Route path="dashboard/someMails" component={EmailsHome} />
       <Route path="dashboard/someMails/:id" component={EmailModal} />
     </Switch>` 
  1. 由于我需要维护状态,将状态存储在reducer(redux)中。

  2. 但是什么时候存储是个问题。

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

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

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

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

我已经创建了一个关于如何实现此功能的基本模板: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);
  1. 当您点击“标记为已读”时,将切换到“已选中”状态 电子邮件组件。
  2. Follow-up点击link,会调用我们的action-creator, 这将传入消息的 id 和 state-value (对或错)。
  3. 保存我们消息数组的 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);
  1. 组件挂载,我们调用action-creator来查找邮件 在 Redux 中与我们 url.
  2. 中的 ID 相同
  3. 我们显示该电子邮件,现在取决于您是否 更改了上一页中电子邮件的状态(阅读或 未读),它将获取更新后的值并将其显示在模式中。

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