どのようにReduxの

Question

にもっとして1つのコンポーネントに状態を渡すために、私はフレームワークに+ Reduxのと初心者に反応して作業を開始。*

行うには何をしようとしていますか？

私はボタンをクリックしなければならず、クリックすると他のコンテナ/ svgタグ内のsvgパスが表示されます。私knowlageによると

私のコードまたは私のコード

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

1回の更新の状態は、それが他を更新するとき、私はので、2つのコンポーネントに状態を渡しています。

ただし、ファイルを直接エクスポートしないため、ファイルが機能していません。あなたが親コンポーネントを作成する必要があり、私はもっとして1つの部品の下

に状態を渡すために取り組むために持っているか

私が直接

を輸出していたときにエラーさ*

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

ここでメインコンテナはデータとアクションを受信し、そこから必要なものを子コンポーネントに送信できます。

ボタンとプレビュー画像コンポーネントはステートレスなコンポーネントであり、親コンテナから小道具を受け取るだけです。