React / Redux声音分发应用程序中的下一步

时间:2018-07-15 23:26:15

标签: javascript reactjs redux react-redux

我正在为freeCodeCamp挑战构建一个react / redux鼓机应用程序,并且已经完成了按钮和建立的连接,以便onClick可以将带有url链接的操作作为属性分发给声音,但是我一直挂在我需要创建的减速器上,以使其按我的意愿工作。

您可以在此处查看到目前为止的内容:https://codesandbox.io/s/k29r3928z7,并且可以忽略顶部的Hello / Goodbye开关的内容,因为那只是我了解React / Redux的流程开始。我的主要问题是在这种情况下我应该如何处理状态?按下按钮根本不会真正改变状态,因此我不确定在创建减速器的“新状态”步骤中应该做什么。

1 个答案:

答案 0 :(得分:2)

我不熟悉freeCodeCamp挑战赛的具体目标,但是,如果您希望应用程序在用户单击显示的任何一个按钮时播放正确的声音,则可以通过更新{{1 }}操作如下:

drumClickHit

要说明动作创建者和化简器之间的关系,可以通过向化简器中添加以下“ CLICKHIT”案例,以达到与上述相同的结果:

export const drumClickHit = url => {

  //Create an audio object from the url provided to the action
  const sound = new Audio(url);

  //Play the audio object immediatly
  sound.play();

  return {
    type: "CLICKHIT",
    url
  };
};

但是,对于您的应用,最好将音频播放逻辑放到操作中,而不要放在还原器上。