尝试将 React App 重构为带有音量滑块的 React-Redux 问题

Question

我一直在做 freecodecamps Drum Machine 应用程序。我能够使用 React 完全完成该应用程序，但我制作了一个副本以尝试熟悉一起使用 react-redux，并且在尝试重构输入滑块时我没有做正确的事情。它不会改变剪辑的音量，也不会随着音量变化更新显示。

这是我的工作反应应用程序 React Only Drum Machine

这是我要重构的那个 React-Redux Drum Machine

我经常模仿这个人，试图了解如何将我从 freecodecamp 学到的知识付诸实践 J8ahmed Drum Machine

我想这可能与这里的代码有关，但我不确定

<input type="range" min="0" max="1" step=".1" value={this.props.volume} className="slider" id="myRange" onChange={(e)=>{this.props.volumeToggle(e)}}/>

Answer 1

原来这是应用程序中的一个简单错误 class 我将此 volumeToggle 函数分配给了 updateVolume 但在控件 class 中我尝试调用 this.props.powerToggle()。下面是正确的代码。非常感谢 J8ahmed，当我专门给他发消息时，他帮我查看了错误。

应用Class

<Controls power={this.props.power} volume={this.props.volume} bank={this.props.bank} info={this.props.info} powerToggle={this.powerToggle} bankToggle={this.bankToggle} updateVolume={this.volumeToggle}/>

控件Class

<div id="volume-container">
      <h1>Volume</h1>
      <div class="slidecontainer">
        <input type="range" min="0" max="1" step=".1" value={this.props.volume} className="slider" id="myRange" onChange={(e)=>{this.props.updateVolume(e)}}/>
      </div>
    </div>

尝试将 React App 重构为带有音量滑块的 React-Redux 问题

Trying to refactor React App to React-Redux issue w/ volume slider

javascript

refactoring

reactjs

redux

react-redux