如何將狀態傳遞給 redux 中的多個組件

Question

我開始使用 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);

根據我的知識，我將狀態傳遞給兩個組件，因此當一個組件的狀態更新時，它將更新另一個組件。

但是該文件不起作用，因為我們並沒有直接導出它。

我必須如何處理才能將狀態傳遞給多個組件

以下是我直接導出時的錯誤

*

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

准備好容器后，您需要將此組件的 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);

現在主容器將接收數據和操作，您可以從那里向子組件發送您需要的任何內容。

按鈕和預覽圖像組件是無狀態組件，它們只是從父容器接收道具。