リアクティブreduxのコンポーネントとコンテナーの違いは何ですか？
回答:
ComponentReact APIの一部です。コンポーネントは、React UIの一部を記述するクラスまたは関数です。
コンテナーは、connectReduxストアに送信されるReactコンポーネントの非公式な用語です。コンテナーはRedux状態の更新とdispatchアクションを受け取り、通常はDOM要素をレンダリングしません。プレゼンテーションを子コンポーネントに委譲します。
詳細については、Dan Abramovによるプレゼンテーションコンポーネントとコンテナコンポーネントをご覧ください。
データのフェッチと表示を担当するコンポーネントは、スマートコンポーネントまたはコンテナコンポーネントと呼ばれます。データは、redux、ネットワークコール、またはサードパーティのサブスクリプションから取得できます。
ダム/プレゼンテーションコンポーネントは、受け取った小道具に基づいてビューを表示する責任があるコンポーネントです。
ここに例がある良い記事
https://www.cronj.com/blog/difference-container-component-react-js/
コンポーネントはビューの一部を構成するため、DOM要素をレンダリングし、コンテンツを画面に表示する必要があります。
コンテナーはデータエラボレーションに参加するため、状態を変更する必要があるため、reduxと「対話」する必要があります。そのため、接続（react-redux）で接続を作成し、関数mapStateToPropsおよびmapDispatchToPropsを含める必要があります。
.
.
.
import { connect } from "react-redux";
class myContainer extends Component {
}
function mapStateToProps(state) {
// You return what it will show up as props of myContainer
return {
property: this.state.property
};
}
function mapDispatchToProps(dispatch) {
// Whenever property is called, it should be passed to all reducers
return bindActionCreators({ property: property }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(myContainer);部品
コンポーネントを使用すると、UIを独立した再利用可能な部分に分割し、各部分を分離して考えることができます。それらは「プレゼンテーションコンポーネント」と呼ばれることもあり、主な関心事は物事の見え方です
コンテナ
コンテナーは、UIのないコンポーネントのようなものであり、コンテナーは物事の仕組みに関係しています。。主にデータを取得および更新するためにreduxストアと通信します
Redux docの表の比較を参照してください
詳細説明https://redux.js.org/basics/usage-with-react#presentational-and-container-components
React、Reduxは独立したライブラリです。
Reactは、HTML文書を作成するためのフレームワークを提供します。コンポーネントは、ドキュメントの特定の部分を表すものです。コンポーネントに関連付けられたメソッドは、ドキュメントの特定の部分を操作できます。
Reduxは、JS環境でデータを保存および管理するための特定の哲学を規定するフレームワークです。これは、特定のメソッドが定義された1つの大きなJSオブジェクトであり、最良の使用例は、Webアプリの状態管理の形になります。
Reactはすべてのデータがルートからリーフに流れるように規定しているため、すべての小道具をメインにし、コンポーネントで小道具を定義して、小道具を特定の小道具に子に渡すのは面倒になります。また、アプリケーション全体の状態が脆弱になります。
React Reduxは、接続されたコンポーネントを別のReactコンポーネント（your Container）でラップするだけで、Reduxストアに直接接続するクリーンなソリューションを提供します。実装では、アプリケーション全体の状態のどの部分が必要かをすでに定義しています。そのconnectため、そのデータをストアから取り出し、それ自体をラップするコンポーネントに小道具として渡します。
この簡単な例を考えてみましょう：
class Person extends Component {
constructor(props){
this.name = this.props.name;
this.type = this.props.type;
}
render() {
return <p> My name is {this.name}. I am a doctor { this.type } </p>
}
}
const connect = InnerComponent => {
class A extends Component{
render() {
return <InnerComponent {...this.props} type="Doctor"/>
}
}
A.displayName = `Connect(${InnerComponent.displayName})`
return A
}connect関数は小道具を渡しtypeます。
このようにして、接続はPersonコンポーネントのコンテナとして機能します。