React-Redux:绑定按键操作以启动减速器序列的规范方法是什么? [英] React-Redux: What is the canonical way to bind a keypress action to kick off a reducer sequence?

问题描述

这是一个关于 react-redux 的新手问题，我花了几个小时寻找才找到，所以我发布了这个问题，然后为后代回答，也可能是代码审查.

我正在使用 react-redux 创建一个游戏，我想在其中使用 WASD 键在小地图上移动角色.(这只是更大努力的实践示例).地图只是由一堆彩色的

组成.

据我所知，我需要以某种方式将按键事件绑定到 React DOM 中的某些内容，以便触发 mapDispatchToProps，然后开始重新评估减速器.问题是，这是一个按键，没有什么可以绑定的.我正在使用 jquery 绑定按键并调用该函数.

相关查询:

• React - 在更改事件中检测输入"按键 这个没有用，因为它只是绑定到文本区域的 onChange 事件
• https://facebook.github.io/react/docs/events.html#keyboard-events 没有告诉你如何绑定，事实上我真的不知道如何对一个元素使用 onKeyDown ！很奇怪.

解决方案

解决方案改编自此处:

addEventListener 使用映射调度响应 redux

关键是删除 jquery 并使用 document.addEventListener 将其绑定到 react 组件中.这是工作代码的摘录:

///////////////////////////////////////////////////////////////容器////////////////////////////////////////////类 GameMap 扩展了 React.Component{渲染图(){console.log('renderMap')控制台日志(this.props)返回 this.props.gamemap.map((tile) => {//const x = "tile" + tilereturn <div className={"tile " + tile}></div>})}使成为() {console.log('GameMap.render()')返回 (<div className="GameMap">{this.renderMap()}</div>)}componentDidMount() {console.log("componentDidMount")控制台日志(这个)//以下行不会绑定到这里的商店...document.addEventListener("keydown", this.props.keyPress );}}函数 GMmapStateToProps(state){//从这里进入this.propsconsole.log('BLmapStateToProps')控制台日志(状态)const gamemap = state.gamemap.gamemap.map((a) => {开关(一){情况1:返回无瓷砖"案例9:返回瓷砖用户"}返回瓷砖墙"})返回{游戏地图:游戏地图}}函数 GMmapDispatchToProps(dispatch){//当selectbook调用时，将结果传递给所有reducerconsole.log('GMmapDispatchToProps')返回 bindActionCreators({keyPress: keyPress}, dispatch)}const VGameMap = 连接(GMmapStateToProps，GMmapDispatchToProps)(游戏地图)/////////////////////////////////////////////////////////////////动作//////////////////////////////////////////////actions/index.js 动作创建者功能键按下(键){console.log('keyPress: ', key)控制台.log(key.key)var 向量 = ""开关(键){案例'w'，'箭头向上':向量 = {x:0,y:1}案例's'，'箭头向下':向量 = {x:0,y:-1}案例'a'，'ArrowLeft':向量 = {x:-1,y:0}案例d"，箭头右":向量 = {x:1,y:0}}返回 {类型:按键"，有效载荷:向量}//这是一个创建的动作}

This is a newbie question for react-redux I spent a couple hours hunting around before finding so I am posting the question and then answering for posterity and also maybe code review.

I am using react-redux to create a game where I want to use the WASD keys to move a character around a small map. (This is just a practice example for a larger endeavor). The map simply consists of a bunch of colored <div>s.

As I understand it I need to somehow bind the keypress event to something in the React DOM in order to trigger mapDispatchToProps and then kick off the reevaluation of the reducers. The problem is, this being a keypress, there is nothing to bind to. I am using jquery to bind the keypress and call the function.

Related queries:

• React - detect 'enter' key press in change event this one isn't helpful because it just binds to the onChange event of a text area
• https://facebook.github.io/react/docs/events.html#keyboard-events doesn't tell you how to bind and in fact I really couldnt figure out how to use onKeyDown at all with a element! weird.

解决方案

solution was adapted from here:

addEventListener react redux with mapped dispatch

the key is to drop the jquery and to bind it WITHIN the react component using document.addEventListener. here is the excerpt of the working code:

////////////////////////////////////////////
////////////////////// containers
////////////////////////////////////////////
class GameMap extends React.Component{
  renderMap(){
    console.log('renderMap')
    console.log(this.props)
    return this.props.gamemap.map((tile) => {
      //const x = "tile " + tile
      return <div className={"tile " + tile}></div>
    })
  }
  render() {
    console.log('GameMap.render()')
    return (
      <div className="GameMap">
        {this.renderMap()}
      </div>)
  } 
  componentDidMount() {
    console.log("componentDidMount")
    console.log(this)
    // the following line won't be bound to the store here...
    document.addEventListener("keydown", this.props.keyPress );
  }
}
function GMmapStateToProps(state){
  //from here goes into this.props
  console.log('BLmapStateToProps')
  console.log(state)
  const gamemap = state.gamemap.gamemap.map((a) => {
    switch (a){
      case 1:
        return "tile-free"
      case 9:
        return "tile-user"
             }
    return "tile-wall"
  })
  return{
    gamemap: gamemap
  }
}
function GMmapDispatchToProps(dispatch){
  //when selectbook called, pass result to all reducers
  console.log('GMmapDispatchToProps')
  return bindActionCreators({keyPress: keyPress}, dispatch)
}
const VGameMap = connect(GMmapStateToProps, GMmapDispatchToProps)(GameMap)

////////////////////////////////////////////
////////////////////// actions
////////////////////////////////////////////
// actions/index.js action creator
function keyPress(key) {
  console.log('keyPress: ', key)
  console.log(key.key)
  var vector = ""
  switch(key){
    case 'w', 'ArrowUp':
      vector = {x:0,y:1}
    case 's', 'ArrowDown':
      vector = {x:0,y:-1}
    case 'a', 'ArrowLeft':
      vector = {x:-1,y:0}
    case 'd', 'ArrowRight':
      vector = {x:1,y:0}
            }
  return {
    type: "KEYPRESS",
    payload: vector
  } // this is an action created
}

这篇关于React-Redux:绑定按键操作以启动减速器序列的规范方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！