如何从组件到容器中的事件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> 
)