如何将状态传递给redux中的多个组件

Question

我开始使用React + Redux和新手来构建框架。*

我想做什么？

我必须单击一个按钮，然后单击它将在其他container / 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);

根据我的知识，我将状态传递给两个组件，所以当一次更新状态时，它会更新另一个组件。

但该文件无效，因为我们并没有直接导出它。

我如何处理将状态传递给多个组件

以下是我直接导出时的错误

*

Answer 1

您需要创建父组件，此组件将包含按钮和预览组件。

const MyContainer = ({ image, onImageClick }) => (
  <div>
    <div className="sidebar">
      <Button label="Preview image" onClick={onImageClick} />
    </div>
    <div className="content">
      <Preview source={image} />
    </div>
  </div>
);

准备好容器后，需要将此组件的道具映射到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);

现在主容器将接收数据和动作，从那里你可以向子组件发送你需要的任何东西。

按钮和预览图像组件是无状态组件，它们只接收来自父容器的道具。