react-reduxからの接続の使い方

Question

私はconnect（）に少し問題があります。私はプロバイダ内のすべてのコンポーネントをラップすることはうまくいくと思っていましたが、そうではありません。 したがって、私はreact-reduxからconnect（）を使用する必要があることがわかりました。問題はどのように使用すればいいのか分かりません。 This siteはいくつかの例を示していますが、私はそれらを使用しないため、内部に入れるアクションクリエイターがありません....... 誰かが私にアドバイスをくれますか？私はちょうどコンポーネント内の私の店にアクセスしたいと思います...

Answer 1

hereのReduxドキュメントでもっとうまくいくかもしれません。

はここコネクト機能がどのように動作するかの簡単な例です：

import React from 'react'; 
import { connect } from 'react-redux'; 

class Item extends React.Component { 
    render() { 
    return <div onClick={() => this.props.dispatch(/* some action here */)}>{this.props.name}</div>; 
    } 
} 

function mapStateToProps(state) { 
    return { name: state.name }; 
} 

export default connect(mapStateToProps)(Item); 

何上記起こるあなたが包まれ、接続部品を輸出している、Itemコンポーネントをエクスポートするときです。コンポーネントが（それも小道具としてdispatch機能に渡すアプリの状態から小道具nameに渡しますラッピング。

Answer 2

あなたの容器の中に自分の店を使用するためには、2つのことを行う必要がある

まず：名前が示すようmapStateToProps()の使用を作る 、それはあなたが第二を

を指定小道具のお店から状態変数をマップする：あなたは、あなたのコンテナにこれらのpropsを接続する必要があります。これは、場所です。 connect()が写っています。 mapStateToPropsコンポーネントによって返されたオブジェクトは、コンテナに接続されます。あなたは、私はあなたが `connect`の代わりに、` SELECT`に `mapStateToProps`に合格する必要があると思うreact-redux

例

import {connect} from 'react-redux';よう

import React from 'react'; 
import { connect } from 'react-redux'; 

class App extends React.Component { 
    render() { 
    return <div>{this.props.containerData}</div>; 
    } 
} 

function mapStateToProps(state) { 
    return { containerData: state.appData }; 
} 

export default connect(mapStateToProps)(App);