質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2639閲覧

React Redux におけるcomponentsとcontainersの違い

coffee_man

総合スコア13

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/10/12 10:28

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;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HayatoKamono

2017/10/12 13:56

AppContainerがcontainerフォルダ以下で、Appはcomponent以下になるかと思います。
coffee_man

2017/10/12 14:22

ご回答ありがとうございます。つまりAppContainer mapStateToProps mapDispatchToPropsの内容を別ファイルとしてcontainerフォルダ下に置くということでしょうか?
guest

回答1

0

ベストアンサー

Presentational and Container Components

ここで説明されているPresentational ComponentとContainer Componentにもとづいているのではないでしょうか。

投稿2017/10/14 12:25

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問