React Redux におけるcomponentsとcontainersの違いと、それぞれのファイルを置くべきフォルダについて教えていただけますでしょうか?
React Reduxの勉強のためにシンプルに要素をドラッグできるサイトを作成いたしました。(PCでのみ動作)
https://react-simple-draggable-182318.appspot.com/
フォルダ構成はこのようになっております。
├── package.json
├── public
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.test.js
│ ├── actions
│ │ └── index.js
│ ├── components
│ │ └── ActiveNode.js
│ ├── containers
│ │ └── App.js
│ ├── index.js
│ ├── reducers
│ │ └── index.js
│ ├── registerServiceWorker.js
│ └── store
│ └── index.js
現在src/components下においているActiveNode.jsと
src/containers下においているApp.jsはこの位置が適しているのでしょうか?
見よう見まねでなんとか動作するところまではできましたがまだ何が最適なのか、が分かっておりません。コードにcomponentsとcontainersの要素が混ざってひとつのファイルに入っている状態がよくないのでしょうか?
初心者ですのでどんなアドバイスでもいただければ幸いです。
src/containers/App.js
React
1import React, { Component } from 'react'; 2import PropTypes from 'prop-types'; 3import { connect } from 'react-redux'; 4import ActiveNode from '../components/ActiveNode' 5import { handleMouseMove, handleMouseUp } from '../actions'; 6 7export class App extends Component { 8 static propTypes = { 9 handleMouseMove: PropTypes.func.isRequired, 10 handleMouseUp: PropTypes.func.isRequired 11 } 12 13 render() { 14 return ( 15 <div> 16 <ActiveNode /> 17 </div> 18 ); 19 }; 20 21 componentDidMount() { 22 window.addEventListener('mousemove', this.props.handleMouseMove); 23 window.addEventListener('mouseup', this.props.handleMouseUp); 24 }; 25} 26 27const mapStateToProps = state => ({ 28 activeNode: state.activeNode 29}); 30 31const mapDispatchToProps = { 32 handleMouseMove, 33 handleMouseUp 34}; 35 36const AppContainer = connect( 37 mapStateToProps, 38 mapDispatchToProps 39)(App); 40 41export default AppContainer;
src/components/ActiveNode.js
React
1import React, { Component } from 'react'; 2import PropTypes from 'prop-types'; 3import { connect } from 'react-redux'; 4import { clickNode, } from '../actions'; 5 6export class ActiveNode extends Component { 7 static propTypes = { 8 clickNode: PropTypes.func.isRequired, 9 } 10 11 render() { 12 return ( 13 <div className='node' 14 onMouseDown={e => this.props.clickNode(e)} 15 onTouchStart={e => this.props.clickNode(e)} 16 style={{ 17 transform: `translate3d( 18 ${this.props.activeNode.x}px, 19 ${this.props.activeNode.y}px, 20 0px)` }}> 21 {this.props.activeNode.isClicked ? <p>Clicked</p> : <p>Hello</p> } 22 </div> 23 ) 24 } 25} 26 27const mapStateToProps = state => ({ 28 activeNode: state.activeNode 29}); 30 31const mapDispatchToProps = { 32 clickNode 33}; 34 35const ActiveContainer = connect( 36 mapStateToProps, 37 mapDispatchToProps 38)(ActiveNode); 39 40export default ActiveContainer;
回答1件
あなたの回答
tips
プレビュー