[英]How to pass state to more then one component in redux
我开始使用 React + Redux 和框架的新手。*
我想做什么?
我必须单击一个按钮,然后单击它会在其他容器/svg 标签中显示一个 svg 路径。
我的代码或我的代码
import { connect } from "react-redux";
import { BodyTemplate, Button } from "../component/svgPreview/Preview.jsx";
import { previewBodyTemplate } from "../modcon/Actions.js";
const mapStateToProps = ({ previewTemplateState }) => {
return ({
previewTemplateState: previewTemplateState
});
};
const mapDispatchToProps = (dispatch) => {
return ({
onImageClick: (value) => {
dispatch(previewBodyTemplate(value));
}
});
};
/* the following code will work because we cannot export more then one by
default **/
/*
const PreviewContainer = connect(mapStateToProps, mapDispatchToProps)(Button);
const PreviewBody = connect(mapStateToProps, mapDispatchToProps)(BodyTemplate);
export default PreviewContainer;
export default PreviewBody;
*/
/* so i try this */
export const PreviewContainer = connect(mapStateToProps, mapDispatchToProps)(Button);
export const PreviewBody = connect(mapStateToProps)(BodyTemplate);
根据我的知识,我将状态传递给两个组件,因此当一个组件的状态更新时,它将更新另一个组件。
但是该文件不起作用,因为我们并没有直接导出它。
我必须如何处理才能将状态传递给多个组件
以下是我直接导出时的错误
您需要创建一个父组件,该组件将包含按钮和预览组件。
const MyContainer = ({ image, onImageClick }) => (
<div>
<div className="sidebar">
<Button label="Preview image" onClick={onImageClick} />
</div>
<div className="content">
<Preview source={image} />
</div>
</div>
);
准备好容器后,您需要将此组件的 props 映射到来自 redux 的状态/操作。
const mapStateToProps = ({ image, previewTemplateState }) => {
return ({
image: image,
previewTemplateState: previewTemplateState
});
};
const mapDispatchToProps = (dispatch) => {
return ({
onImageClick: (value) => {
dispatch(previewBodyTemplate(value));
}
});
};
export default connect(mapStateToProps, mapDispatchToProps)(MyContainer);
现在主容器将接收数据和操作,您可以从那里向子组件发送您需要的任何内容。
按钮和预览图像组件是无状态组件,它们只是从父容器接收道具。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.