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>
)

如何在React Redux中从组件到容器获取事件

1 个答案: