在反应中打开模态时,后台组件是否会卸载?如果不是,如何使用 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
我需要在这个 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
中的每次状态变化?
当您导航到模态路由时,该组件将卸载。话虽如此,除了 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.
中的 ID 相同
- 我们显示该电子邮件,现在取决于您是否
更改了上一页中电子邮件的状态(阅读或
未读),它将获取更新后的值并将其显示在模式中。
总而言之,是的,你可以在 React 导航到另一个 Route 的过程中执行 redux-logic。在此,我们将一些组件 state-value 传递给 action-creator,它更新了 redux-state,当我们最终导航到模态组件时,它获得了更新的值。
演示(不工作但用于文件结构) 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
中的每次状态变化?
当您导航到模态路由时,该组件将卸载。话虽如此,除了 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. 中的 ID 相同
- 我们显示该电子邮件,现在取决于您是否 更改了上一页中电子邮件的状态(阅读或 未读),它将获取更新后的值并将其显示在模式中。
总而言之,是的,你可以在 React 导航到另一个 Route 的过程中执行 redux-logic。在此,我们将一些组件 state-value 传递给 action-creator,它更新了 redux-state,当我们最终导航到模态组件时,它获得了更新的值。