如何從組件到容器中的事件React Redux

Question

我是Redux的新手。 我很輕鬆地處理了基本的Facebook Flux架構，並且使用它創建了一些不錯的應用。 但我很努力地獲得非常簡單的Redux應用程序的工作。 我主要關心的是容器及其從組件捕獲事件的方式。

我有這個非常簡單的應用程序：

集裝箱

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組件上。在選擇器組件的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> 
)