React Reduxでコンポーネントからコンテナにイベントを取得する方法

Question

Reduxを初めて使用しました。 私は基本的なFacebook Fluxアーキテクチャを非常に簡単に扱い、素晴らしいアプリを作りました。 しかし、私は非常に単純なRedux Appを動作させるために非常に苦労しています。 私の主な関心事は、コンテナとコンポーネントからイベントをキャッチする方法です。

CONTAINERコンテナに到達していない

import { connect } from 'react-redux' 
import {changevalue} from 'actions' 
import App from 'components/App' 


const mapStateToProps = (state) => { 
    return { 
    selector:state.value 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onClick: (e) => { 
     console.log(e) 
     dispatch(changeValue()) 
    } 
    } 
} 

const AppContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(App) 

export default AppContainer; 

コンポーネント

import React, {Component} from 'react' 
import Selector from 'components/Selector' 
import Displayer from 'components/Displayer' 


const App = (selector, onClick) => (
    <div> 
    <Selector onClick={(e) => onClick}/> 
    <Displayer /> 
    </div> 
) 

export default App; 

子コンポーネント

import React, {Component} from 'react' 


const Selector = ({onClick}) => (
    <div onClick={onClick}>click me</div> 
) 

export default Selector; 

onClickイベント：

私はこの非常にシンプルなアプリ持ちますのmapDispatchToProps。 私はこの仕事をすれば啓示を得て、最終的にReduxのことを知っていると感じます！ ;）

誰でも助けてくれますか？ （Reduxのdocは役に立ちません...）

Answer 1

問題はAppコンポーネントにあります。 SelectorコンポーネントのonClickプロパティでは、結果ではなく関数の定義を返す関数を渡しています。

const App = (selector, onClick) => (
    <div> 
    <Selector onClick={(e) => onClick}/> // here is the problem 
    <Displayer /> 
    </div> 
) 

あなたは、単に代わりにこれを行う必要があります。

const App = (selector, onClick) => (
    <div> 
    <Selector onClick={(e) => onClick(e)}/> 
    <Displayer /> 
    </div> 
) 

、あるいは単純に：

const App = (selector, onClick) => (
    <div> 
    <Selector onClick={onClick}/> 
    <Displayer /> 
    </div> 
)