Reactjs addEventListener使用映射的分派对redux进行响应

Reactjs addEventListener使用映射的分派对redux进行响应,reactjs,redux,Reactjs,Redux,我目前正在尝试将事件侦听器添加到我在react中创建的应用程序中。我是通过连接到ComponentDidMountAPI来实现这一点的,该API只在呈现组件时运行一次,并且仅此而已。我的问题是我正在使用connectfromreact redux将我的动作创建者绑定到store.dispatch。我不知道如何将事件侦听器绑定到通过dispatch绑定到存储的action creator版本。有没有一种优雅的方式可以做到这一点 import React, {PropTypes} from 'rea

我目前正在尝试将事件侦听器添加到我在react中创建的应用程序中。我是通过连接到ComponentDidMountAPI来实现这一点的,该API只在呈现组件时运行一次,并且仅此而已。我的问题是我正在使用
connect
from
react redux
将我的动作创建者绑定到
store.dispatch
。我不知道如何将事件侦听器绑定到通过dispatch绑定到存储的action creator版本。有没有一种优雅的方式可以做到这一点

import React, {PropTypes} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import GridApp from '../components/GridApp';
import * as GridActions from '../actions/gridActions';

class App extends React.Component {
  render() {
    const { gridAppState, actions } = this.props;
    return (
        <GridApp gridAppState={gridAppState} actions={actions} />
    );
  }
  componentDidMount() {
    console.log("mounted")
    // the following line won't be bound to the store here...
    document.addEventListener("keydown", GridActions.naiveKeypress );
  }
}

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

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(GridActions, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);
import React,{PropTypes}来自'React';
从“redux”导入{bindActionCreators};
从'react redux'导入{connect};
从“../components/GridApp”导入GridApp;
从“../actions/GridActions”导入*作为GridActions;
类应用程序扩展了React.Component{
render(){
const{gridAppState,actions}=this.props;
返回(
);
}
componentDidMount(){
控制台日志(“已安装”)
//以下行不会绑定到此处的商店。。。
document.addEventListener(“keydown”,GridActions.keypress);
}
}
函数MapStateTops(状态){
返回{
gridAppState:state.gridAppState
};
}
功能图DispatchToprops(调度){
返回{
操作:bindActionCreators(GridActions、dispatch)
};
}
导出默认连接(
MapStateTops,
mapDispatchToProps
)(App);

只需从
这个道具中获取它即可:

  componentDidMount() {
    console.log("mounted")
    // the following line won't be bound to the store here...

    const { actions } = this.props;
    document.addEventListener("keydown", actions.naiveKeypress );
  }

不过,我相信您还需要取消订阅组件卸载事件的
keydown
事件。(即使它从来没有这样做过,只是为了完整性和健壮性)。

谢谢你,这很有效。react redux文档中是否有任何地方显示在连接后,dispatch wrapped操作将附加到组件道具?不确定在文档中的何处我可能错过了这一点/可以了解到这一点…”,这表明在连接“
MapStateTrops
结果与
mapDispatchToProps
结果合并后,dispatch wrapped动作将附加到组件道具。不确定文档,只需检查
connect
功能实现即可。